/* ==========================================================================
   Design tokens - the only place raw values live.
   Themes: light (default) | dark (navy) via prefers-color-scheme | manual override
   with <html data-theme="light|dark">. [data-scope] lets the styleguide
   render both themes side by side, and puts the hero, header and CTA band on navy in both themes.
   Keep the three dark blocks identical (scripts/check-contrast.mjs asserts it).
   ========================================================================== */

/* ---- Theme-independent tokens ------------------------------------------ */
:root {
  --font-sans: "Inter Variable", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* fluid type scale (min ~12.8px) */
  --fs-n1: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --fs-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-1: clamp(1.125rem, 1.06rem + 0.33vw, 1.3125rem);
  --fs-2: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-3: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  --fs-4: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
  --fs-5: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  /* poster display headline: heavy, tight-tracked */
  --fs-display: clamp(2.5rem, 1.55rem + 4.6vw, 4.75rem);
  --fw-display: 800;
  --ls-display: -0.035em;
  --lh-display: 1.02;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* spacing (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;

  /* radii */
  --r-1: 0.25rem;
  --r-2: 0.5rem;
  --r-3: 0.875rem;
  --r-pill: 999px;

  /* motion */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* layout */
  --content-max: 72rem;
  --measure: 65ch;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4rem;
}

/* ---- Light theme (default) --------------------------------------------- */
/* Palette (poster direction): deep navy and orange. Raw scales are theme-independent; semantic tokens below pick from them. */
:root,
[data-scope="light"] {
  color-scheme: light;

  --navy-950: #050d20;
  --navy-900: #0a1a3a;
  --navy-850: #0d2145;
  --navy-800: #12295a;
  --navy-700: #1c3a78;
  --navy-600: #2d4f94;
  --navy-300: #9db1d9;
  --navy-200: #c3cfe8;
  --navy-100: #e2e8f4;
  --navy-50: #f3f6fb;
  --orange-100: #ffeadd;
  --orange-300: #ffb184;
  --orange-400: #ff9d66;
  --orange-450: #fb8a50;
  --orange-500: #e8672a;
  --orange-700: #b0420f;
  --orange-800: #8a330b;

  --c-bg: #ffffff;
  --c-surface: var(--navy-50);
  --c-surface-2: #e6ecf6;
  --c-text: var(--navy-900);
  --c-text-muted: #43526e;
  --c-border: #d3dbea;          /* decorative dividers */
  --c-border-strong: #6f7f9d;   /* UI component edges (>= 3:1) */
  --c-focus: var(--navy-700);

  /* accent = orange for TEXT, links, icons and outlines on this theme's surfaces (dark orange here, light orange on navy) */
  --c-accent: var(--orange-700);
  --c-accent-hover: var(--orange-800);
  --c-on-accent: #ffffff;
  --c-accent-soft: var(--orange-100);
  /* cta = bright orange FILL with dark navy text (never white on bright orange) */
  --c-cta: var(--orange-500);
  --c-cta-hover: var(--orange-450);
  --c-on-cta: var(--navy-900);
  --c-cta-ink: var(--navy-950);       /* dark button on the orange CTA band */
  --c-on-cta-ink: #ffffff;

  --c-success: #0d6a37;
  --c-success-bg: #e3f3ea;
  --c-warn: #8a4b00;
  --c-warn-bg: #fdf0dc;
  --c-error: #b42318;
  --c-error-bg: #fde8e6;

  /* Layer palette: Shell, Content, Assessment, Progress, Commerce, Support (tuned to sit with navy) */
  --layer-shell: #2a56c6;
  --layer-content: #0b6a80;
  --layer-assessment: #b4400f;
  --layer-progress: #2b7a3a;
  --layer-commerce: #9c2a7e;
  --layer-support: #52617f;
  --on-layer: #ffffff;

  /* Illustrative test-screen card: light in BOTH themes (it shows a centre's own screen, not ours) */
  --mock-bg: #f2f5fb;
  --mock-text: var(--navy-900);
  --mock-muted: #4a5a78;
  --mock-line: #c9d3e6;                /* decorative skeleton lines (aria-hidden) */
  --mock-edge: #6f7f9d;                /* radio outlines (>= 3:1) */
  --mock-brand: #6b3fc4;               /* the example centre's own colour */
  --mock-on-brand: #ffffff;
  --mock-chip-done: #1b7f45;
  --mock-on-chip-done: #ffffff;
  --mock-chip-flag: #f0c27a;
  --mock-on-chip-flag: var(--navy-900);
  --mock-bar: var(--navy-100);
  --mock-timer: var(--navy-900);
  --mock-on-timer: #ffffff;
  --mock-chip-todo: #dfe5f1;
  --mock-on-chip-todo: #3a4a6a;

  --grad-hero: radial-gradient(60rem 30rem at 100% 0%, var(--navy-800), transparent 70%), linear-gradient(180deg, var(--navy-900), var(--navy-950));

  --shadow-1: 0 1px 2px rgb(10 26 58 / 0.08), 0 1px 1px rgb(10 26 58 / 0.04);
  --shadow-2: 0 4px 12px rgb(10 26 58 / 0.10), 0 2px 4px rgb(10 26 58 / 0.06);
  --shadow-3: 0 12px 32px rgb(10 26 58 / 0.16), 0 4px 8px rgb(10 26 58 / 0.06);
}

/* ---- Dark theme: OS preference, unless user forced light --------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-bg: #0a1a3a;
    --c-surface: #0f2249;
    --c-surface-2: #16305f;
    --c-text: #eef2fa;
    --c-text-muted: #b4c0da;
    --c-border: #223a6b;
    --c-border-strong: #7189b5;
    --c-focus: #ffb98f;

    --c-accent: #ff9d66;
    --c-accent-hover: #ffb98f;
    --c-on-accent: #0a1a3a;
    --c-accent-soft: #3b2a26;
    --c-cta: #e8672a;
    --c-cta-hover: #fb8a50;
    --c-on-cta: #0a1a3a;
    --c-cta-ink: #050d20;
    --c-on-cta-ink: #ffffff;

    --c-success: #6fd49a;
    --c-success-bg: #0f3226;
    --c-warn: #f2b25c;
    --c-warn-bg: #33260f;
    --c-error: #ff8f86;
    --c-error-bg: #3a1a1f;

    --layer-shell: #8fb0ff;
    --layer-content: #5fd0e6;
    --layer-assessment: #ff9f72;
    --layer-progress: #8fdc9a;
    --layer-commerce: #f197d6;
    --layer-support: #aebbd4;
    --on-layer: #0a1a3a;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-3: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}

/* ---- Dark theme: manual override. Also the scope used by the always-navy hero, header and CTA band --- */
:root[data-theme="dark"],
[data-scope="dark"] {
  color-scheme: dark;

  --c-bg: #0a1a3a;
  --c-surface: #0f2249;
  --c-surface-2: #16305f;
  --c-text: #eef2fa;
  --c-text-muted: #b4c0da;
  --c-border: #223a6b;
  --c-border-strong: #7189b5;
  --c-focus: #ffb98f;

  --c-accent: #ff9d66;
  --c-accent-hover: #ffb98f;
  --c-on-accent: #0a1a3a;
  --c-accent-soft: #3b2a26;
  --c-cta: #e8672a;
  --c-cta-hover: #fb8a50;
  --c-on-cta: #0a1a3a;
  --c-cta-ink: #050d20;
  --c-on-cta-ink: #ffffff;

  --c-success: #6fd49a;
  --c-success-bg: #0f3226;
  --c-warn: #f2b25c;
  --c-warn-bg: #33260f;
  --c-error: #ff8f86;
  --c-error-bg: #3a1a1f;

  --layer-shell: #8fb0ff;
  --layer-content: #5fd0e6;
  --layer-assessment: #ff9f72;
  --layer-progress: #8fdc9a;
  --layer-commerce: #f197d6;
  --layer-support: #aebbd4;
  --on-layer: #0a1a3a;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
  --shadow-3: 0 12px 32px rgb(0 0 0 / 0.6);
}

/* ---- Reduced motion: collapse all durations ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-scope] {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-3: 0.01ms;
  }
}