/*
 * Alcove design tokens: the ONLY place colors, fonts, and sizes are defined.
 * Screens use var(--token) and never hard-coded colors, so themes swap values
 * without layout changes (docs/GUI.md, docs/BRAND.md).
 *
 * Themes: <html data-theme="light|dark|high-contrast"> (set by /js/theme.js).
 * Brand values come from the Brand Guidelines ("Linen and Ink").
 * STATUS values were approved by Trenton on 2026-10-10 (docs/DECISIONS.md); every
 * pair is contrast-checked by `npm run check:contrast`:
 *   label on fill >= 4.5:1, shape against page >= 3:1, on every theme.
 * Status colors are reserved for status; never use them decoratively.
 */

:root,
[data-theme="light"] {
  /* Brand */
  --surface: #F4F0E9;          /* linen */
  --surface-raised: #FFFFFF;
  --text: #1C2230;             /* ink */
  --text-muted: #6B665F;       /* stone grey */
  --pebble: #8A8580;           /* large text 24px+, icons, rules only */
  --border: #D9D2C5;           /* sand */
  --border-strong: #8A8580;    /* pebble: form-control outlines (WCAG 3:1) */
  --border-width: 1px;
  --brand: #2C3E5C;            /* ink blue: links, primary buttons, focus */
  --on-brand: #FFFFFF;
  --danger: #B42318;           /* form/system errors (text on surface) */

  /* Status (approved 2026-10-10): fill + label color */
  --p1: #B42318;  --p1-on: #FFFFFF;
  --p2: #B54708;  --p2-on: #FFFFFF;
  --p3: #067647;  --p3-on: #FFFFFF;
  --srp-hold: #8A4B08;      --srp-hold-on: #FFFFFF;
  --srp-secure: #175CD3;    --srp-secure-on: #FFFFFF;
  --srp-lockdown: #912018;  --srp-lockdown-on: #FFFFFF;
  --srp-evacuate: #05603A;  --srp-evacuate-on: #FFFFFF;
  --srp-shelter: #4E5BA6;   --srp-shelter-on: #FFFFFF;
  --unit-active: #175CD3;    --unit-active-on: #FFFFFF;     /* en route / on scene */
  --unit-available: #067647; --unit-available-on: #FFFFFF;
  --unit-oos: #6B665F;       --unit-oos-on: #FFFFFF;        /* out of service, GPS stale */
  --trail-1: #6941C6; --trail-1-on: #FFFFFF;   /* purple */
  --trail-2: #0E7090; --trail-2-on: #FFFFFF;   /* teal */
  --trail-3: #C11574; --trail-3-on: #FFFFFF;   /* pink */
  --table-head: #EDE7DC;       /* table header row, a shade darker than rows (2026-10-20) */
  --row-hover: #F8F5EF;        /* a table row under the mouse */

  color-scheme: light;
}

[data-theme="dark"] {
  --surface: #1C2230;
  --surface-raised: #252C3D;
  --text: #F4F0E9;
  --text-muted: #A9A39C;
  --pebble: #A9A39C;
  --border: #3A4254;
  --border-strong: #8A8580;
  --border-width: 1px;
  --brand: #8FA3C4;
  --on-brand: #1C2230;
  --danger: #F97066;

  --p1: #F97066;  --p1-on: #1C2230;
  --p2: #FDB022;  --p2-on: #1C2230;
  --p3: #47CD89;  --p3-on: #1C2230;
  --srp-hold: #F7B27A;      --srp-hold-on: #1C2230;
  --srp-secure: #84ADFF;    --srp-secure-on: #1C2230;
  --srp-lockdown: #FDA29B;  --srp-lockdown-on: #1C2230;
  --srp-evacuate: #75E0A7;  --srp-evacuate-on: #1C2230;
  --srp-shelter: #B4BCFF;   --srp-shelter-on: #1C2230;
  --unit-active: #84ADFF;    --unit-active-on: #1C2230;
  --unit-available: #47CD89; --unit-available-on: #1C2230;
  --unit-oos: #A9A39C;       --unit-oos-on: #1C2230;
  --trail-1: #BDB4FE; --trail-1-on: #1C2230;
  --trail-2: #67E3F9; --trail-2-on: #1C2230;
  --trail-3: #FAA7E0; --trail-3-on: #1C2230;
  --table-head: #1F2535;       /* table header row, a shade darker than rows (2026-10-20) */
  --row-hover: #2C3447;        /* a table row under the mouse */

  color-scheme: dark;
}

[data-theme="high-contrast"] {
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --text: #000000;
  --text-muted: #000000;       /* no muted grey in high contrast */
  --pebble: #000000;
  --border: #000000;
  --border-strong: #000000;
  --border-width: 2px;
  --brand: #1C2E4F;
  --on-brand: #FFFFFF;
  --danger: #912018;

  --p1: #B42318;  --p1-on: #FFFFFF;
  --p2: #B54708;  --p2-on: #FFFFFF;
  --p3: #067647;  --p3-on: #FFFFFF;
  --srp-hold: #8A4B08;      --srp-hold-on: #FFFFFF;
  --srp-secure: #175CD3;    --srp-secure-on: #FFFFFF;
  --srp-lockdown: #912018;  --srp-lockdown-on: #FFFFFF;
  --srp-evacuate: #05603A;  --srp-evacuate-on: #FFFFFF;
  --srp-shelter: #4E5BA6;   --srp-shelter-on: #FFFFFF;
  --unit-active: #175CD3;    --unit-active-on: #FFFFFF;
  --unit-available: #067647; --unit-available-on: #FFFFFF;
  --unit-oos: #6B665F;       --unit-oos-on: #FFFFFF;
  --trail-1: #6941C6; --trail-1-on: #FFFFFF;
  --trail-2: #0E7090; --trail-2-on: #FFFFFF;
  --trail-3: #C11574; --trail-3-on: #FFFFFF;
  --table-head: #EBEBEB;
  --row-hover: #F2F2F2;

  color-scheme: light;
}

:root {
  /* Type: IBM Plex (self-hosted, /css/fonts.css) */
  --font-serif: "IBM Plex Serif", Georgia, Cambria, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;
  --size-32: 32px; --size-24: 24px; --size-20: 20px; --size-16: 16px;
  --size-14: 14px; --size-13: 13px; --size-12: 12px;

  /* The standard width of settings and detail pages (Trenton 2026-10-21): tiles left-aligned, one width everywhere. */
  --page-width: 960px;

  /* Shape */
  --radius-control: 6px;
  --radius-card: 10px;
  --shadow-overlay: 0 8px 24px rgba(28, 34, 48, 0.18); /* menus and dialogs only */

  /* Space (4 px grid) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  --header-height: 64px;
  --nav-width: 232px;
}