/* ==========================================================================
   Thames Uro — design tokens  (v1.0, 1 Oct 2026)
   --------------------------------------------------------------------------
   ONE source of truth for colour, type, spacing, radius, elevation and
   motion across thamesuro.com. Replaces the ~9 hand-copied :root blocks that
   had drifted (see DESIGN_SYSTEM.md → "Why this exists").

   Theme model: these tokens are DARK; <html data-theme="light"> switches to
   light. That attribute is set by ONE script, /assets/theme.js, loaded in every
   page's <head>: saved frcs_theme choice first, else the device setting.
   Pages must NOT read prefers-color-scheme or frcs_theme themselves (in CSS or
   JS), or they drift from the rest of the site (privacy/terms did this).

   Cascade: everything sits in @layer tokens. Unlayered CSS always beats
   layered CSS, so a page that still carries its own inline :root keeps its
   old values until that block is deleted. Migration is page-by-page and
   nothing changes until you remove the inline copy.

   Reference values = the public landing + account pages (the most-copied
   and contrast-checked set). Contrast ratios noted are WCAG 2.x.
   ========================================================================== */

@layer tokens {

  :root {
    color-scheme: dark;

    /* ---- Surfaces (dark) ------------------------------------------------ */
    --bg:             #0b1020;   /* page background */
    --surface:        #182240;   /* cards, buttons, panels */
    --surface-2:      #20305a;   /* raised / hover surface, inputs */
    --surface-sunken: #131c38;   /* inset card, quieter panel */
    --glow:           #17224a;   /* hero radial glow */
    --border:         #2c3e6e;

    /* ---- Text ----------------------------------------------------------- */
    --text:   #eef2ff;           /* 14.0:1 on --surface */
    --text-2: #93a3c8;           /*  6.2:1 on --surface */

    /* ---- Brand ---------------------------------------------------------- */
    --accent:        #14b8a6;    /* teal: fills, borders, focus ring */
    --accent-hover:  #19cbb6;    /* hover state of an accent fill */
    --accent-strong: #0d9488;    /* deeper teal for gradients/pressed */
    --accent-ink:    #14b8a6;    /* accent used AS TEXT (7.6:1 on --bg) */
    --on-accent:     #04211d;    /* text on an accent fill (6.8:1) */

    --gold:          #eab308;    /* Part 2 / premium */
    --gold-hover:    #facc15;
    --gold-ink:      #eab308;
    --on-gold:       #241a02;    /* text on a gold fill (8.9:1) */

    /* ---- Semantic (text-safe on --surface; tint with --*-bg) ------------ */
    --success: #34d399;          /* 8.1:1 */
    --warning: #fbbf24;          /* 9.4:1 */
    --danger:  #f87171;          /* 5.7:1 */
    --on-danger: #2a0b0b;        /* text on a danger fill (7.6:1 on #f87171) */
    --success-bg: color-mix(in srgb, var(--success) 14%, transparent);
    --warning-bg: color-mix(in srgb, var(--warning) 14%, transparent);
    --danger-bg:  color-mix(in srgb, var(--danger) 16%, transparent);

    /* ---- Product modes (Part 1 question bank) --------------------------- */
    --mode-bank: #3b82f6;
    --mode-exam: #a855f7;
    /* text on a saturated semantic/mode fill (exam, bank, warning, success…). Dark-theme fills are
       light, so dark ink; light-theme fills are dark, so white. Checked ≥ 4.5:1 for every fill. */
    --on-fill: #0b1020;

    /* ---- Typography ----------------------------------------------------- */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Scale: collapses the 81 sizes found in the Oct 2026 audit. */
    --fs-2xs: .72rem;    /* eyebrows, pills, tiny meta */
    --fs-xs:  .8rem;     /* captions, footnotes, legal meta */
    --fs-sm:  .875rem;   /* secondary body, small buttons (was .85/.86/.88) */
    --fs-md:  .95rem;    /* default button, dense body (was .9/.92/.95/.96) */
    --fs-base: 1rem;     /* body */
    --fs-lg:  1.125rem;  /* lead text, card titles (was 1.05–1.18) */
    --fs-xl:  1.35rem;   /* section sub-heads */
    --fs-2xl: 1.7rem;    /* large stats, page titles in apps */
    --fs-h2:  clamp(1.5rem, 3.4vw, 2rem);
    --fs-h1:  clamp(2.1rem, 5.5vw, 3.3rem);
    --fs-display: clamp(2.6rem, 8vw, 4.4rem);

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;
    --fw-heavy:   800;   /* replaces 820 / 850 */

    --lh-tight: 1.15;    /* display + headings */
    --lh-snug:  1.35;    /* UI labels, card titles */
    --lh-body:  1.6;     /* paragraphs */

    /* ---- Spacing (4px base) --------------------------------------------- */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;

    /* ---- Radius (was 16 distinct values) -------------------------------- */
    --r-sm:   8px;       /* chips, inputs inside cards, small tags */
    --r-md:   12px;      /* buttons, inputs, small cards */
    --r-lg:   16px;      /* cards, panels */
    --r-xl:   20px;      /* hero cards, modals */
    --r-pill: 999px;     /* pills, badges */
    --r-full: 50%;       /* avatars, icon dots */

    /* ---- Elevation ------------------------------------------------------ */
    --shadow-color: rgba(0, 0, 0, .4);
    --shadow-1: 0 1px 2px var(--shadow-color);
    --shadow-2: 0 10px 26px var(--shadow-color);
    --shadow-3: 0 24px 60px var(--shadow-color);
    --glow-accent: 0 10px 30px rgba(20, 184, 166, .30);
    --glow-gold:   0 10px 30px rgba(234, 179, 8, .28);
    --scrim: rgba(6, 10, 22, .72);   /* modal backdrop; dark in both themes on purpose */

    /* ---- Focus ---------------------------------------------------------- */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--accent);

    /* ---- Motion --------------------------------------------------------- */
    --dur-fast: 150ms;   /* hover, press */
    --dur-base: 220ms;   /* panels, toggles */
    --dur-slow: 400ms;   /* page-level reveals */
    --ease-out: cubic-bezier(.2, .7, .3, 1);
    --ease-in-out: cubic-bezier(.45, 0, .25, 1);

    /* ---- Layout --------------------------------------------------------- */
    --container: 1040px;   /* the width every page and the canonical nav already use */
    --container-prose: 72ch;
    --gutter: 16px;
    --tap-min: 44px;     /* WCAG 2.5.5 target size */

    /* ---- Deprecated aliases (remove once no page references them) ------- */
    --surface2:  var(--surface-2);
    --card2:     var(--surface-sunken);
    --text2:     var(--text-2);
    --accent2:   var(--accent-strong);
    --shadow:    var(--shadow-color);
    --correct:   var(--success);
    --incorrect: var(--danger);
    --err-ink:   var(--danger);
    --warn:      var(--warning);
    --warnbg:    var(--warning-bg);
    --exam:      var(--mode-exam);
    --bank:      var(--mode-bank);
  }

  :root[data-theme="light"] {
    color-scheme: light;

    --bg:             #f8fafc;
    --surface:        #ffffff;
    --surface-2:      #eef2f7;
    --surface-sunken: #f3f6fb;
    --glow:           #e3ecfb;
    --border:         #dbe3ee;

    --text:   #0f172a;           /* 17.9:1 on white */
    --text-2: #5a6b86;           /*  5.4:1 on white */

    --accent:        #0d9488;
    --accent-hover:  #14b8a6;    /* lighter on hover keeps --on-accent ≥ 4.5:1 */
    --accent-strong: #0f766e;
    --accent-ink:    #0f766e;    /* #0d9488 is only 3.6:1 on white: too low for text */
    --on-accent:     #04211d;    /* 4.5:1 on #0d9488 */

    --gold:          #b8860b;
    --gold-hover:    #ca9a0d;
    --gold-ink:      #8a6508;
    --on-gold:       #241a02;    /* 5.3:1 */

    --success: #047857;          /* 5.5:1 on white (#059669 fails at 3.8) */
    --warning: #92400e;          /* 7.1:1; #b45309 drops to 4.1:1 on its own tint */
    --danger:  #b91c1c;          /* 6.5:1 */
    --on-danger: #ffffff;        /* 6.5:1 on #b91c1c */
    /* Lighter tints than dark mode so the matching text colour stays ≥ 4.5:1
       on its own banner (success 4.6, warning 5.7, danger 5.2 over --bg). */
    --success-bg: color-mix(in srgb, var(--success) 10%, transparent);
    --warning-bg: color-mix(in srgb, var(--warning) 12%, transparent);
    --danger-bg:  color-mix(in srgb, var(--danger) 10%, transparent);

    --mode-bank: #2563eb;
    --mode-exam: #9333ea;
    --on-fill: #ffffff;

    --shadow-color: rgba(15, 23, 42, .10);
    --glow-accent: 0 10px 30px rgba(13, 148, 136, .22);
    --glow-gold:   0 10px 30px rgba(184, 134, 11, .22);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0ms;
      --dur-base: 0ms;
      --dur-slow: 0ms;
    }
  }
}