/*
 * Nota design tokens — the one source of every color, type, spacing, radius,
 * border and motion value on the public site and the three consoles.
 *
 * Canonical copy: site/shared/. Each served tree (site/public, site/dashboard,
 * site/custodian, site/review) carries an identical copy under ./shared/,
 * because every page loads its styles same-origin and relative (ConsoleCSP
 * style-src 'self'; reviewd and controld serve separate trees). Edit only
 * site/shared/, then run scripts/sync-site-shared.sh; scripts/check.sh fails
 * when a copy drifts.
 *
 * Layers:
 *   1. Palette — raw values, named for what they are. Never used directly by
 *      a component; only the semantic layer reads them.
 *   2. Semantic — roles (--color-*, --tone-*). Components use these only, so a
 *      theme is a remap of this layer and nothing else.
 *   3. Scales — type, space, radius, border, motion, layout.
 *
 * Themes: light by default; dark follows prefers-color-scheme unless the
 * root carries data-theme="light". data-theme="dark" forces dark.
 *
 * Every text/background pair below clears WCAG AA (4.5:1) in its theme.
 */

:root {
  /* ---- 1. Palette ------------------------------------------------------ */
  --palette-navy-950: #0b2238;
  --palette-navy-900: #0f2a48;
  --palette-navy-850: #10293f;
  --palette-navy-800: #0e2640;
  --palette-navy-750: #12304d;
  --palette-navy-700: #24476a;
  --palette-navy-650: #1a3a58;
  --palette-navy-600: #3d5570;
  --palette-slate-500: #5b6b7c;
  --palette-slate-400: #8fa8c0;
  --palette-slate-300: #a9c1d9;
  --palette-slate-200: #c5d2e0;
  --palette-slate-150: #e2e9f1;
  --palette-slate-100: #e8eef5;
  --palette-paper: #f4f7fa;
  --palette-white: #ffffff;
  --palette-ice: #eaf2fa;

  --palette-blue-600: #2f6ca8;
  --palette-blue-400: #7fa9d4;
  --palette-blue-300: #7fc4f5;

  --palette-red-700: #c0262d;
  --palette-red-600: #b23a44;
  --palette-red-300: #e8737b;
  --palette-red-200: #f2b8bc;
  --palette-red-50: #fbe9ea;
  --palette-red-950: #22233a;

  --palette-green-700: #1f7a4d;
  --palette-green-300: #5fd3a0;

  --palette-amber-800: #8a5a00;
  --palette-amber-300: #e5b65a;

  /* ---- 2. Semantic: surfaces and text ---------------------------------- */
  color-scheme: light;
  --color-bg: var(--palette-paper);
  --color-surface: var(--palette-white);
  --color-surface-sunken: var(--palette-slate-100);
  --color-ink: var(--palette-navy-900);
  --color-ink-2: var(--palette-navy-600);
  --color-line: var(--palette-slate-200);
  --color-line-strong: var(--palette-navy-900);
  --color-grid: var(--palette-slate-150);
  --color-accent: var(--palette-blue-600);
  --color-primary: var(--palette-navy-900);
  --color-on-primary: var(--palette-white);
  --color-focus: var(--palette-blue-600);

  /* Brand mark and header threads (red, white and blue). */
  --color-mark-1: var(--palette-navy-900);
  --color-mark-2: var(--palette-blue-600);
  --color-mark-3: var(--palette-red-700);

  /* ---- 2. Semantic: tones ---------------------------------------------- */
  /* Each tone: solid fill, text on that fill, text on a surface, row tint.
   * Map a state to a tone in the page script; never style a state directly. */
  --tone-ok: var(--palette-green-700);
  --tone-ok-on: var(--palette-white);
  --tone-ok-text: var(--palette-green-700);

  --tone-info: var(--palette-blue-600);
  --tone-info-on: var(--palette-white);
  --tone-info-text: var(--palette-blue-600);

  --tone-warn: var(--palette-amber-800);
  --tone-warn-on: var(--palette-white);
  --tone-warn-text: var(--palette-amber-800);

  --tone-alarm: var(--palette-red-700);
  --tone-alarm-on: var(--palette-white);
  --tone-alarm-text: var(--palette-red-700);
  --tone-alarm-tint: var(--palette-red-50);

  --tone-neutral: var(--palette-slate-500);
  --tone-neutral-on: var(--palette-white);
  --tone-neutral-text: var(--palette-slate-500);

  /* Coverage-strip fills (data, not text). Reserved for the 24-hour coverage
   * strips in the final design; no page renders them yet because the status
   * API returns only each custodian's latest coverage record. */
  --strip-active: var(--tone-ok);
  --strip-idle: var(--palette-blue-400);
  --strip-gap: var(--tone-alarm);
  --strip-dormant: var(--tone-neutral);
  --strip-none: var(--palette-slate-150);

  /* ---- 3. Type --------------------------------------------------------- */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.75rem;   /* 12px: table headers, kickers */
  --text-sm: 0.8125rem; /* 13px: ids, legends, meta */
  --text-md: 0.9375rem; /* 15px: body in consoles */
  --text-base: 1rem;    /* 16px: body on the public site */
  --text-lg: 1.125rem;  /* 18px: lede, card titles */
  --text-xl: 1.375rem;  /* 22px: section headings */
  --text-2xl: 1.75rem;  /* 28px: page titles, wordmark */
  --text-3xl: 2.5rem;   /* 40px: tile numbers */
  --text-display: clamp(2rem, 5vw, 3rem); /* hero */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --tracking-label: 0.08em;
  --tracking-tight: -0.015em;

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

  /* ---- 3. Radius, border, motion, layout ------------------------------- */
  --radius-none: 0;
  --border-thin: 1px;
  --border-strong: 2px;
  --border-accent: 4px; /* active-nav underline, alarm row edge */
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;
  --duration-fast: 120ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);
  --content-max: 120rem; /* 1920px: the design's 40px gutters hold on a wide window; past this, margins grow */
  --measure: 68ch;
  --waves-image: url("./waves-light.svg");
}

/* Dark: Blueprint navy. Only the semantic layer changes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--palette-navy-950);
    --color-surface: var(--palette-navy-850);
    --color-surface-sunken: var(--palette-navy-800);
    --color-ink: var(--palette-ice);
    --color-ink-2: var(--palette-slate-300);
    --color-line: var(--palette-navy-700);
    --color-line-strong: var(--palette-ice);
    --color-grid: var(--palette-navy-750);
    --color-accent: var(--palette-blue-300);
    --color-primary: var(--palette-ice);
    --color-on-primary: var(--palette-navy-950);
    --color-focus: var(--palette-blue-300);
    --color-mark-1: var(--palette-ice);
    --color-mark-2: var(--palette-blue-300);
    --color-mark-3: var(--palette-red-300);
    --tone-ok: var(--palette-green-300);
    --tone-ok-on: var(--palette-navy-950);
    --tone-ok-text: var(--palette-green-300);
    --tone-info: var(--palette-blue-300);
    --tone-info-on: var(--palette-navy-950);
    --tone-info-text: var(--palette-blue-300);
    --tone-warn: var(--palette-amber-300);
    --tone-warn-on: var(--palette-navy-950);
    --tone-warn-text: var(--palette-amber-300);
    --tone-alarm: var(--palette-red-600);
    --tone-alarm-on: var(--palette-white);
    --tone-alarm-text: var(--palette-red-200);
    --tone-alarm-tint: var(--palette-red-950);
    --tone-neutral: var(--palette-slate-400);
    --tone-neutral-on: var(--palette-navy-950);
    --tone-neutral-text: var(--palette-slate-400);
    --strip-idle: var(--palette-blue-300);
    --strip-none: var(--palette-navy-650);
    --waves-image: url("./waves-dark.svg");
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--palette-navy-950);
  --color-surface: var(--palette-navy-850);
  --color-surface-sunken: var(--palette-navy-800);
  --color-ink: var(--palette-ice);
  --color-ink-2: var(--palette-slate-300);
  --color-line: var(--palette-navy-700);
  --color-line-strong: var(--palette-ice);
  --color-grid: var(--palette-navy-750);
  --color-accent: var(--palette-blue-300);
  --color-primary: var(--palette-ice);
  --color-on-primary: var(--palette-navy-950);
  --color-focus: var(--palette-blue-300);
  --color-mark-1: var(--palette-ice);
  --color-mark-2: var(--palette-blue-300);
  --color-mark-3: var(--palette-red-300);
  --tone-ok: var(--palette-green-300);
  --tone-ok-on: var(--palette-navy-950);
  --tone-ok-text: var(--palette-green-300);
  --tone-info: var(--palette-blue-300);
  --tone-info-on: var(--palette-navy-950);
  --tone-info-text: var(--palette-blue-300);
  --tone-warn: var(--palette-amber-300);
  --tone-warn-on: var(--palette-navy-950);
  --tone-warn-text: var(--palette-amber-300);
  --tone-alarm: var(--palette-red-600);
  --tone-alarm-on: var(--palette-white);
  --tone-alarm-text: var(--palette-red-200);
  --tone-alarm-tint: var(--palette-red-950);
  --tone-neutral: var(--palette-slate-400);
  --tone-neutral-on: var(--palette-navy-950);
  --tone-neutral-text: var(--palette-slate-400);
  --strip-idle: var(--palette-blue-300);
  --strip-none: var(--palette-navy-650);
  --waves-image: url("./waves-dark.svg");
}