/* Design tokens. Every colour, size and space the site uses is defined here
   and only referenced from components.css. No other CSS anywhere.

   Direction (2026-10-02 reskin): "the form, done right". The output of this
   site is a form that gets routed and CAC-signed, so the interface borrows a
   form's grammar: ruled cells with the label inside the box, part numbers on
   the steps, olive-drab ink on map-grey paper. Headings use the DIN-style
   signage face that ships with Windows (Bahnschrift) or Apple (DIN
   Alternate), so nothing is downloaded and the CSP stays font-src 'self'. */

:root {
  color-scheme: light dark;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bahnschrift SemiCondensed", "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Classic modular scale on a 16px body. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Square-ish: a form, not a card deck. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --page-max: 72rem;
  --measure: 40rem;
  --gutter: 1rem;

  --bg: #eef0ec;          /* map-grey paper */
  --surface: #ffffff;     /* the form sheet */
  --surface-2: #f5f6f3;   /* read-only and weekend cells */
  --ink: #1d2320;
  --ink-2: #48514b;
  --ink-3: #606a63;       /* >= 4.5:1 on --surface and --bg */
  --line: #b9c0b9;        /* form rules */
  --line-2: #dde1dc;
  --brand: #3b4a2c;       /* olive-drab ink */
  --brand-2: #56683f;
  --brand-tint: #e6eadc;
  --brand-ink: #ffffff;
  --focus: #1f5fd1;
  --good: #23683f;
  --good-bg: #e3efe6;
  --warn: #8a5300;
  --warn-bg: #fbf0dc;
  --danger: #a8261b;
  --danger-bg: #fae8e5;

  /* Duty types, hues carried from the v1.3 form so the calendar reads the
     same, darkened where needed so white text is >= 4.5:1 (WCAG AA). */
  --act-ba: #3d4fc4;
  --act-ba2: #2a3896;
  --act-rst: #2563b0;
  --act-rst2: #1b4f90;
  --act-ata: #1f7a52;
  --act-ata2: #165c3d;
  --act-at: #a3520f;
  --act-rma: #7a32b3;
  --act-ebdl: #5b616e;
  --act-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121512;
    --surface: #1a1e1a;
    --surface-2: #222722;
    --ink: #e5e9e3;
    --ink-2: #b9c1b8;
    --ink-3: #959e94;
    --line: #3d463d;
    --line-2: #2b322b;
    --brand: #b4c79a;
    --brand-2: #c9d8b4;
    --brand-tint: #283020;
    --brand-ink: #141810;
    --focus: #7fa9ff;
    --good: #7fd19c;
    --good-bg: #17301f;
    --warn: #eeb35c;
    --warn-bg: #36280f;
    --danger: #ff8f80;
    --danger-bg: #3a1814;
  }
}

:root[data-theme="dark"] {
  --bg: #121512;
  --surface: #1a1e1a;
  --surface-2: #222722;
  --ink: #e5e9e3;
  --ink-2: #b9c1b8;
  --ink-3: #959e94;
  --line: #3d463d;
  --line-2: #2b322b;
  --brand: #b4c79a;
  --brand-2: #c9d8b4;
  --brand-tint: #283020;
  --brand-ink: #141810;
  --focus: #7fa9ff;
  --good: #7fd19c;
  --good-bg: #17301f;
  --warn: #eeb35c;
  --warn-bg: #36280f;
  --danger: #ff8f80;
  --danger-bg: #3a1814;
}