/* ==================================================================
   Design tokens
   ------------------------------------------------------------------
   One source of truth for colour, type, space, depth and motion.
   Nothing downstream hard-codes a value.

   The palette is built around a deep indigo and a clinical teal. It is
   not a tint of a single hue: the accent carries actions, the teal
   carries progress and correctness, and the subject hues are a
   deliberate eight-way set with even lightness so no subject looks
   more important than another.

   Dark is a full re-declaration, not an inversion. Surfaces get
   lighter as they come forward, text loses a little contrast rather
   than turning pure white, and every accent is re-picked for a dark
   background rather than reused from light.
   ================================================================== */

:root {
  /* ---- Type ------------------------------------------------------ */
  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* A 1.2 scale, rounded to sensible pixel values at 16px root. */
  --text-2xs: 0.6875rem;   /* 11 */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.8125rem;    /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md: 1rem;         /* 16 */
  --text-lg: 1.125rem;     /* 18 */
  --text-xl: 1.375rem;     /* 22 */
  --text-2xl: 1.75rem;     /* 28 */
  --text-3xl: 2.25rem;     /* 36 */
  --text-4xl: 3rem;        /* 48 */

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.06em;
  --tracking-caps: 0.1em;

  /* ---- Space (4px base) ------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 1.75rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;

  --gutter: 1.125rem;
  --measure: 48rem;
  --measure-wide: 64rem;

  /* ---- Radius ---------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---- Motion ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --t-instant: 90ms;
  --t-fast: 150ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --t-slower: 640ms;

  /* ================================================================
     Light
     ================================================================ */

  /* Surfaces, in order of how far forward they sit. */
  --bg: #f5f7fb;
  --bg-deep: #eef1f8;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f8;
  --surface-invert: #0d1220;

  --line: #e4e9f2;
  --line-strong: #cdd6e6;
  --line-faint: #f0f3f8;

  /* Ink */
  --ink: #0f1626;
  --ink-2: #4a5568;
  --ink-3: #8593a8;
  --ink-4: #b3bdcc;
  --ink-invert: #ffffff;

  /* Accent — actions, links, the current thing */
  --accent: #3b52d9;
  --accent-hover: #3345bc;
  --accent-press: #2a389c;
  --accent-soft: #e8ecfd;
  --accent-soft-2: #d5ddfb;
  --accent-ink: #26349c;
  --accent-glow: 59 82 217;

  /* Secondary — progress, streaks, the clinical half of the identity */
  --teal: #0e7c86;
  --teal-soft: #dff4f5;
  --teal-ink: #0a5a62;

  /* Verdicts */
  --ok: #0a7d46;
  --ok-soft: #dff5e8;
  --ok-line: #93d9b5;
  --ok-ink: #075c33;

  --bad: #c62b28;
  --bad-soft: #fdeae9;
  --bad-line: #f2aeab;
  --bad-ink: #98201e;

  --warn: #9a6400;
  --warn-soft: #fdf2d9;
  --warn-line: #e6c477;
  --warn-ink: #7a5000;

  --info: #1667a8;
  --info-soft: #e2f0fa;
  --info-ink: #0f4e80;

  /* Eight subject hues, evenly spaced and matched for lightness. */
  --g1: #3b52d9;
  --g2: #0e7c86;
  --g3: #b2452a;
  --g4: #7145c4;
  --g5: #1667a8;
  --g6: #96601a;
  --g7: #2f7a38;
  --g8: #a62c65;

  /* Depth. Two shadows per step: a tight contact shadow and a soft cast. */
  --shadow-xs: 0 1px 2px rgba(15, 22, 38, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 22, 38, 0.06), 0 2px 6px rgba(15, 22, 38, 0.04);
  --shadow-md: 0 1px 3px rgba(15, 22, 38, 0.06), 0 6px 16px -4px rgba(15, 22, 38, 0.10);
  --shadow-lg: 0 2px 6px rgba(15, 22, 38, 0.06), 0 16px 36px -8px rgba(15, 22, 38, 0.16);
  --shadow-xl: 0 4px 10px rgba(15, 22, 38, 0.08), 0 32px 64px -16px rgba(15, 22, 38, 0.22);
  --shadow-accent: 0 1px 2px rgba(15, 22, 38, 0.12), 0 8px 20px -6px rgb(var(--accent-glow) / 0.42);
  --ring: 0 0 0 3px rgb(var(--accent-glow) / 0.22);

  /* Chrome */
  --topbar-h: 58px;
  --tabbar-h: 62px;
  --scrim: rgba(12, 18, 32, 0.45);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.9);

  /* A single place for the page's ambient wash. */
  --wash:
    radial-gradient(90% 55% at 12% -8%, rgb(var(--accent-glow) / 0.10), transparent 62%),
    radial-gradient(70% 45% at 96% 2%, rgba(113, 69, 196, 0.08), transparent 60%);
}

/* ==================================================================
   Dark — declared twice on purpose: once for the system preference
   while the theme is left on auto, once for an explicit choice.
   ================================================================== */

:root[data-theme='auto'] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
    color-scheme: dark;

    --bg: #080b13;
    --bg-deep: #05070d;
    --surface: #111726;
    --surface-2: #161d2e;
    --surface-3: #1d2537;
    --surface-invert: #f2f5fa;

    --line: #222c41;
    --line-strong: #32405c;
    --line-faint: #1a2233;

    --ink: #eef2fa;
    --ink-2: #a3b0c6;
    --ink-3: #6d7c95;
    --ink-4: #4b5870;
    --ink-invert: #080b13;

    --accent: #7d94ff;
    --accent-hover: #93a7ff;
    --accent-press: #6c85f5;
    --accent-soft: #18223c;
    --accent-soft-2: #1f2c4d;
    --accent-ink: #bccaff;
    --accent-glow: 125 148 255;

    --teal: #4dc4ce;
    --teal-soft: #0d2b2f;
    --teal-ink: #8fe0e6;

    --ok: #56d18c;
    --ok-soft: #0e2c1d;
    --ok-line: #2c6a45;
    --ok-ink: #8fe6b4;

    --bad: #ff8a80;
    --bad-soft: #301715;
    --bad-line: #74352f;
    --bad-ink: #ffb3ab;

    --warn: #f5c469;
    --warn-soft: #2c2413;
    --warn-line: #67552a;
    --warn-ink: #ffd894;

    --info: #62b0e8;
    --info-soft: #102438;
    --info-ink: #9acdf2;

    --g1: #7d94ff;
    --g2: #4dc4ce;
    --g3: #f08a68;
    --g4: #b08cf5;
    --g5: #62b0e8;
    --g6: #e0ab5c;
    --g7: #6fc97a;
    --g8: #e878a6;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 20px -6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.55), 0 20px 44px -10px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 6px 18px rgba(0, 0, 0, 0.6), 0 40px 80px -20px rgba(0, 0, 0, 0.8);
    --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 26px -8px rgb(var(--accent-glow) / 0.4);
    --ring: 0 0 0 3px rgb(var(--accent-glow) / 0.3);

    --scrim: rgba(0, 0, 0, 0.66);
    --glass: rgba(17, 23, 38, 0.74);
    --glass-strong: rgba(17, 23, 38, 0.92);

    --wash:
      radial-gradient(90% 55% at 12% -8%, rgb(var(--accent-glow) / 0.13), transparent 62%),
      radial-gradient(70% 45% at 96% 2%, rgba(176, 140, 245, 0.10), transparent 60%);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #080b13;
  --bg-deep: #05070d;
  --surface: #111726;
  --surface-2: #161d2e;
  --surface-3: #1d2537;
  --surface-invert: #f2f5fa;

  --line: #222c41;
  --line-strong: #32405c;
  --line-faint: #1a2233;

  --ink: #eef2fa;
  --ink-2: #a3b0c6;
  --ink-3: #6d7c95;
  --ink-4: #4b5870;
  --ink-invert: #080b13;

  --accent: #7d94ff;
  --accent-hover: #93a7ff;
  --accent-press: #6c85f5;
  --accent-soft: #18223c;
  --accent-soft-2: #1f2c4d;
  --accent-ink: #bccaff;
  --accent-glow: 125 148 255;

  --teal: #4dc4ce;
  --teal-soft: #0d2b2f;
  --teal-ink: #8fe0e6;

  --ok: #56d18c;
  --ok-soft: #0e2c1d;
  --ok-line: #2c6a45;
  --ok-ink: #8fe6b4;

  --bad: #ff8a80;
  --bad-soft: #301715;
  --bad-line: #74352f;
  --bad-ink: #ffb3ab;

  --warn: #f5c469;
  --warn-soft: #2c2413;
  --warn-line: #67552a;
  --warn-ink: #ffd894;

  --info: #62b0e8;
  --info-soft: #102438;
  --info-ink: #9acdf2;

  --g1: #7d94ff;
  --g2: #4dc4ce;
  --g3: #f08a68;
  --g4: #b08cf5;
  --g5: #62b0e8;
  --g6: #e0ab5c;
  --g7: #6fc97a;
  --g8: #e878a6;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 20px -6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.55), 0 20px 44px -10px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 6px 18px rgba(0, 0, 0, 0.6), 0 40px 80px -20px rgba(0, 0, 0, 0.8);
  --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 26px -8px rgb(var(--accent-glow) / 0.4);
  --ring: 0 0 0 3px rgb(var(--accent-glow) / 0.3);

  --scrim: rgba(0, 0, 0, 0.66);
  --glass: rgba(17, 23, 38, 0.74);
  --glass-strong: rgba(17, 23, 38, 0.92);

  --wash:
    radial-gradient(90% 55% at 12% -8%, rgb(var(--accent-glow) / 0.13), transparent 62%),
    radial-gradient(70% 45% at 96% 2%, rgba(176, 140, 245, 0.10), transparent 60%);
}