:root {
  --navy: rgb(13, 27, 62);
  --navy-mid: rgb(22, 48, 100);
  --navy-hover: rgb(40, 68, 130);
  --page-bg: rgb(240, 242, 247);
  --card-bg: #ffffff;
  --border: rgb(190, 205, 225);
  --border-soft: rgb(215, 225, 240);
  --row-alt: rgb(246, 249, 255);
  --header-bg: rgb(218, 226, 245);
  --pill-bar-bg: rgb(232, 237, 252);
  --pill-bar-border: rgb(190, 205, 232);
  --pill-border: rgb(145, 170, 215);
  --pill-hover: rgb(205, 216, 242);
  --footer-bg: rgb(228, 234, 248);
  --footer-border: rgb(185, 200, 228);
  --chip-soft-bg: rgb(205, 215, 240);

  --red-btn: rgb(190, 35, 35);
  --red-hover: rgb(220, 60, 60);
  --orange-btn: rgb(170, 80, 0);
  --orange-hover: rgb(205, 100, 0);
  --green-btn: rgb(30, 130, 50);
  --green-hover: rgb(40, 160, 65);
  --blue-btn: rgb(30, 100, 170);
  --blue-hover: rgb(45, 125, 210);

  --passed: rgb(22, 130, 60);
  --failed: rgb(180, 30, 30);
  --credited: rgb(30, 90, 180);
  --credited-from: rgb(120, 120, 120);

  /* Tinted backgrounds + soft borders for status pills (Passed / Failed /
     Credited). Same hue as the solid color above, dialed way down. */
  --passed-bg:    rgba(22, 130, 60, 0.10);
  --passed-border: rgba(22, 130, 60, 0.30);
  --failed-bg:    rgba(180, 30, 30, 0.10);
  --failed-border: rgba(180, 30, 30, 0.30);
  --credited-bg:  rgba(30, 90, 180, 0.10);
  --credited-border: rgba(30, 90, 180, 0.30);

  --text-muted: rgb(100, 100, 100);
  --text-soft: rgb(85, 85, 85);

  --notice-bg: rgb(255, 250, 218);
  --notice-border: rgb(200, 170, 50);
  --weights-bg: rgb(219, 234, 254);
  --weights-border: rgb(147, 197, 253);
  --weights-text: rgb(30, 64, 120);

  /* Neon accent — used by the shimmer bar under the app header. */
  --neon-cyan: rgb(0, 229, 255);
  --neon-blue: rgb(30, 144, 255);
  --neon-edge: rgb(120, 220, 255);
  --neon-glow: rgba(0, 229, 255, 0.55);

  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-sans);
  color: #222;
  background: var(--page-bg);
}

button {
  font-family: var(--font-sans);
}

input, select, textarea {
  font-family: var(--font-sans);
}