/* MUA colour tokens — the single source of truth for every launch-portal surface.
   Consumed three ways:
     • /index.html      → <link rel="stylesheet" href="/tokens.css">
     • /logged-out.html → <link rel="stylesheet" href="/tokens.css">
     • /admin/          → build-time @import from admin-src/src/index.css, which
                          inlines both blocks into the hashed admin CSS.

   Every name is --mua-* on purpose. styles.css already owns --text, --border,
   --accent, --surface and --bg on :root. If a token here reused one of those
   names, styles.css would win the light value (equal specificity, later sheet)
   while :root[data-theme="dark"] still won the dark one — a half-working theme
   with no error anywhere. Do not shorten these names.

   Two blocks only, no @media (prefers-color-scheme) fallback. That block would
   triplicate ~35 declarations to serve the single case "theme.js did not run",
   and in that case portal.js did not run either, so the page is already broken.
   Light-only is the better degradation. If you ever add the third block, also
   switch the admin's @custom-variant to the two-selector form — both, or the
   surfaces disagree.

   Contrast: --mua-text targets AAA (>=7:1) on both surfaces, --mua-text-muted
   and every status colour target AA (>=4.5:1), --mua-border-strong and
   --mua-focus target >=3:1 per WCAG SC 1.4.11. */

:root {
  color-scheme: light;

  --mua-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  --mua-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Neutral ramp, hue ~228deg at low chroma so it sits under #0033a1 rather
     than fighting it. Deliberately symmetric: step n against the light surface
     reads about the same as step (1000-n) against the dark one, so a token
     pair swaps cleanly. No pure #000 or #fff at either end. */
  --mua-n-50:  #f8f9fb;
  --mua-n-100: #eef0f4;
  --mua-n-200: #e0e4ec;
  --mua-n-300: #c6ccd9;
  --mua-n-400: #98a1b3;
  --mua-n-500: #7d879b;
  --mua-n-600: #626c80;
  --mua-n-700: #4c5566;
  --mua-n-800: #333b49;
  --mua-n-900: #191d26;
  --mua-n-950: #101319;

  --mua-surface:         var(--mua-n-100);
  --mua-surface-raised:  var(--mua-n-50);
  --mua-surface-sunken:  #e6e9f0;
  --mua-surface-overlay: #fbfcfd;

  --mua-text:        var(--mua-n-900);  /* 14.78:1 on surface, 16.01 on raised */
  --mua-text-muted:  var(--mua-n-700);  /*  6.58:1 / 7.12                       */
  --mua-text-faint:  var(--mua-n-600);  /*  4.63:1 / 5.01                       */

  --mua-border:        var(--mua-n-200);
  --mua-border-strong: var(--mua-n-500); /* 3.17:1 / 3.43 — SC 1.4.11 */

  --mua-brand:            #0033a1;  /* 9.26:1 on surface */
  --mua-brand-hover:      #002b8a;
  --mua-brand-fill:       #0033a1;
  --mua-brand-fill-hover: #002b8a;
  --mua-brand-tint:       #e6ecfa;

  --mua-accent:            #4338ca;  /* 6.93:1 on surface, 7.50 on raised */
  --mua-accent-fill:       #4338ca;
  --mua-accent-fill-hover: #3730a3;
  --mua-accent-tint:       #eae8fb;

  /* The logo orange is 2.55:1 on the light surface — it fails AA at every size
     and NEVER carries text. It survives untouched as a fill (with dark ink on
     top, 6.38:1 in both modes) and as decoration. Orange text uses -text. */
  --mua-warm:      #ff671d;
  --mua-warm-text: #ad3d0e;  /* 5.33:1 / 5.78 */
  --mua-warm-fill: #ff671d;
  --mua-warm-tint: #fdeadf;

  --mua-danger:      #b42318;
  --mua-danger-fill: #b42318;
  --mua-danger-tint: #fbe6e4;
  --mua-warn:        #92400e;
  --mua-warn-tint:   #fdf1dc;
  --mua-success:     #036a4e;
  --mua-success-tint:#def0e8;
  --mua-info:        #4338ca;
  --mua-info-tint:   #eae8fb;

  --mua-on-fill: var(--mua-n-50);   /* text on brand / accent / danger fills */
  --mua-on-warm: var(--mua-n-950);  /* text on the orange fill, and only there */

  --mua-focus:        #0033a1;
  --mua-focus-offset: var(--mua-n-50);

  --mua-shadow-sm: 0 1px 2px rgba(16, 19, 25, 0.06);
  --mua-shadow:    0 1px 2px rgba(16, 19, 25, 0.06), 0 20px 45px rgba(0, 51, 161, 0.08);
  --mua-shadow-lg: 0 2px 4px rgba(16, 19, 25, 0.07), 0 24px 60px rgba(0, 51, 161, 0.14);
  /* Shadows read as almost nothing on a dark canvas; the ring is what actually
     communicates elevation there. Light mode leaves it off. */
  --mua-elevation-ring: none;

  --mua-radius:     18px;
  --mua-radius-xl:  28px;
  --mua-radius-ctl: 0.625rem;
}

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

  --mua-surface:         var(--mua-n-950);
  --mua-surface-raised:  var(--mua-n-900);
  --mua-surface-sunken:  #0a0c11;
  --mua-surface-overlay: #20252f;

  --mua-text:       var(--mua-n-100);  /* 16.30:1 on surface, 14.78 on raised */
  --mua-text-muted: var(--mua-n-400);  /*  7.16:1 / 6.49                       */
  --mua-text-faint: var(--mua-n-500);  /*  5.15:1 / 4.67                       */

  --mua-border:        var(--mua-n-800);
  --mua-border-strong: var(--mua-n-600);

  /* Fills DARKEN on hover in dark mode too. The conventional "lighten on hover"
     pushes --mua-on-fill below 4.5:1 (#6d64f0 lands at 4.21). */
  --mua-brand:            #7ea2ff;
  --mua-brand-hover:      #91b0ff;
  --mua-brand-fill:       #2456e0;
  --mua-brand-fill-hover: #1d4ed8;
  --mua-brand-tint:       #16203a;

  --mua-accent:            #a5b4fc;
  --mua-accent-fill:       #5b52ec;
  --mua-accent-fill-hover: #4f46e5;
  --mua-accent-tint:       #1d1b3d;

  --mua-warm-text: #ff8a4c;
  --mua-warm-tint: #2a1a10;

  --mua-danger:      #ff9d94;
  --mua-danger-fill: #c0362b;
  --mua-danger-tint: #2a1416;
  --mua-warn:        #f5b168;
  --mua-warn-tint:   #2a2410;
  --mua-success:     #5fd3a4;
  --mua-success-tint:#0e2620;
  --mua-info:        #a5b4fc;
  --mua-info-tint:   #1d1b3d;

  --mua-focus:        #7ea2ff;
  --mua-focus-offset: var(--mua-n-950);

  --mua-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --mua-shadow:    0 1px 2px rgba(0, 0, 0, 0.55), 0 20px 45px rgba(0, 0, 0, 0.45);
  --mua-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.6), 0 24px 60px rgba(0, 0, 0, 0.55);
  --mua-elevation-ring: inset 0 0 0 1px var(--mua-border);
}