/* Design tokens — ADR-0020.
 *
 * The dark map is written twice because CSS cannot share one declaration
 * block between a media query and a plain selector. A test asserts the two
 * copies stay identical, and that both carry every property the light map does.
 */

/* ---- Primitives and scale ------------------------------------------------ */

:root {
  --blue-700: #0f3fc4;
  --blue-600: #1652f0;
  --blue-400: #5b8cff;
  --blue-300: #82a7ff;
  --blue-050: #eef3ff;
  --blue-950: #111f3d;
  --mint-800: #00734f;
  --mint-700: #00805c;
  --mint-500: #00c48c;
  --mint-400: #26d9a3;
  --mint-050: #e2faf1;
  --mint-950: #06301f;
  --navy-950: #070c14;
  --navy-900: #0a1424;
  --navy-880: #0d1523;
  --navy-850: #111b2c;
  --navy-800: #1e2c40;
  --slate-600: #4a5b70;
  --slate-550: #616f81;
  --slate-500: #7b8a9d;
  --slate-400: #8494a8;
  --slate-300: #b3c1d3;
  --slate-200: #e6ebf1;
  --slate-100: #f1f4fa;
  --paper: #fdfeff;
  --paper-tinted: #fbfcfe;
  --amber-600: #99590a;
  --amber-400: #e0a33c;
  --amber-050: #fff4e0;
  --amber-950: #2e1e00;

  /* The logo's gold. gold-500 is the hex as drawn and is decorative only: it
   * measures 2.84:1 on the light page and fails even the 3:1 floor, so the
   * light theme emphasises in bronze while the dark theme uses the logo's own
   * gold. The logo image keeps gold in both themes — WCAG 1.4.3 exempts
   * logotypes, tokens it does not. */
  --gold-600: #7d6534;
  --gold-500: #ab9560;
  --gold-400: #c8af74;
  --gold-050: #f7f1e1;
  --gold-950: #2a2413;
  --red-600: #c92a1e;
  --red-400: #f87d72;
  --red-050: #fdecea;
  --red-950: #2e0f0c;
  --ring-light: rgb(22 82 240 / 28%);
  --ring-dark: rgb(91 140 255 / 34%);
  --font-sans: -apple-system, blinkmacsystemfont, "Segoe UI", inter, roboto, helvetica, arial, sans-serif;
  --font-mono: ui-monospace, sfmono-regular, menlo, consolas, monospace;
  --size-display: clamp(2.25rem, 9vw, 4.25rem);
  --size-amount: 2.375rem;
  --size-h1: clamp(1.7rem, 5.2vw, 2.6rem);
  --size-h2: clamp(1.3rem, 3.4vw, 1.7rem);
  --size-stat: clamp(1.25rem, 4.5vw, 1.75rem);
  --size-h3: 1.19rem;
  --size-lead: clamp(1.06rem, 2.6vw, 1.25rem);
  --size-cta: 1.0625rem;
  --size-brand: 1.125rem;
  --size-body: 1rem;
  --size-sm: 0.9375rem;
  --size-xs: 0.8125rem;
  --size-micro: 0.6875rem;

  /* 16px minimum on form controls, or iOS zooms the page on focus. */
  --size-input: 1rem;
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.035em;
  --tracking-snug: -0.02em;
  --tracking-slight: -0.01em;
  --tracking-wide: 0.09em;
  --leading-tight: 1.08;
  --leading-body: 1.6;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 34px;
  --space-8: 44px;
  --space-9: 66px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-pill: 99px;
  --container: 1120px;
  --gutter: 22px;
  --transition: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}

/* ---- Semantic: light ----------------------------------------------------- */

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

  --surface-page: var(--paper-tinted);
  --surface-sunken: var(--slate-100);
  --surface-raised: var(--paper);
  --text-strong: var(--navy-900);
  --text: var(--slate-600);
  --text-muted: var(--slate-550);
  --text-on-brand: var(--paper-tinted);
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-control: var(--slate-500);
  --brand: var(--blue-600);
  --brand-hover: var(--blue-700);
  --brand-soft: var(--blue-050);
  --accent: var(--mint-500);
  --accent-soft: var(--mint-050);
  --emphasis: var(--gold-600);
  --emphasis-soft: var(--gold-050);
  --focus-ring: var(--ring-light);
  --shadow-brand: 0 8px 26px var(--ring-light);
  --gradient-brand: linear-gradient(135deg, var(--blue-600), var(--mint-800));
  --gradient-text: linear-gradient(100deg, var(--blue-600), var(--mint-700));
  --info: var(--blue-600);
  --info-soft: var(--blue-050);
  --success: var(--mint-700);
  --success-soft: var(--mint-050);
  --warning: var(--amber-600);
  --warning-soft: var(--amber-050);
  --danger: var(--red-600);
  --danger-soft: var(--red-050);

  /* The logo ships as two files, not one recoloured by CSS: its navy measures
   * 1.1:1 on the dark page and "Boost" disappears. Carried as a custom property
   * because those inherit — background-image does not, so a rule keyed on
   * [data-theme] would miss the pinned panels /styleguide renders side by side. */
  --brand-wordmark: url("/assets/brand-wordmark-524f4295.webp");
  --brand-lockup: url("/assets/brand-lockup-9eb90332.webp");
}

/* ---- Semantic: dark ------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface-page: var(--navy-950);
    --surface-sunken: var(--navy-880);
    --surface-raised: var(--navy-850);
    --text-strong: var(--slate-100);
    --text: var(--slate-300);
    --text-muted: var(--slate-400);
    --text-on-brand: var(--navy-950);
    --border: var(--navy-800);
    --border-strong: var(--slate-600);
    --border-control: var(--slate-550);
    --brand: var(--blue-400);
    --brand-hover: var(--blue-300);
    --brand-soft: var(--blue-950);
    --accent: var(--mint-400);
    --accent-soft: var(--mint-950);
    --emphasis: var(--gold-400);
    --emphasis-soft: var(--gold-950);
    --focus-ring: var(--ring-dark);
    --shadow-brand: 0 8px 26px var(--ring-dark);
    --gradient-brand: linear-gradient(135deg, var(--blue-400), var(--mint-400));
    --gradient-text: linear-gradient(100deg, var(--blue-400), var(--mint-400));
    --info: var(--blue-400);
    --info-soft: var(--blue-950);
    --success: var(--mint-400);
    --success-soft: var(--mint-950);
    --warning: var(--amber-400);
    --warning-soft: var(--amber-950);
    --danger: var(--red-400);
    --danger-soft: var(--red-950);
    --brand-wordmark: url("/assets/brand-wordmark-dark-d5d02998.webp");
    --brand-lockup: url("/assets/brand-lockup-dark-a5eaa251.webp");
  }
}

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

  --surface-page: var(--navy-950);
  --surface-sunken: var(--navy-880);
  --surface-raised: var(--navy-850);
  --text-strong: var(--slate-100);
  --text: var(--slate-300);
  --text-muted: var(--slate-400);
  --text-on-brand: var(--navy-950);
  --border: var(--navy-800);
  --border-strong: var(--slate-600);
  --border-control: var(--slate-550);
  --brand: var(--blue-400);
  --brand-hover: var(--blue-300);
  --brand-soft: var(--blue-950);
  --accent: var(--mint-400);
  --accent-soft: var(--mint-950);
  --emphasis: var(--gold-400);
  --emphasis-soft: var(--gold-950);
  --focus-ring: var(--ring-dark);
  --shadow-brand: 0 8px 26px var(--ring-dark);
  --gradient-brand: linear-gradient(135deg, var(--blue-400), var(--mint-400));
  --gradient-text: linear-gradient(100deg, var(--blue-400), var(--mint-400));
  --info: var(--blue-400);
  --info-soft: var(--blue-950);
  --success: var(--mint-400);
  --success-soft: var(--mint-950);
  --warning: var(--amber-400);
  --warning-soft: var(--amber-950);
  --danger: var(--red-400);
  --danger-soft: var(--red-950);
  --brand-wordmark: url("/assets/brand-wordmark-dark-d5d02998.webp");
  --brand-lockup: url("/assets/brand-lockup-dark-a5eaa251.webp");
}