/* ==========================================================================
   EVONEX — STANDING WATCH design tokens (single theme, two modes).
   The plotting room: a blackout board ruled with a chalk graticule, chalk ink,
   and a grease pencil that writes only orders and alarms. Flat surfaces, 1px
   hairlines, near-square corners. No gradients, glass, glow, or shadow.
   Mode: NIGHT WATCH (dark, default) / DAY CHART (light, [data-mode="light"]).
   The table here is the single source of truth; page CSS consumes vars only.
   ========================================================================== */

/* ---- fonts (self-hosted, no external request) --------------------------- */
@font-face { font-family:"Big Shoulders"; font-style:normal; font-weight:600 800; font-display:swap; src:url("/assets/fonts/big-shoulders.woff2") format("woff2"); }
@font-face { font-family:"Big Shoulders Stencil"; font-style:normal; font-weight:600 800; font-display:swap; src:url("/assets/fonts/big-shoulders-stencil.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/assets/fonts/public-sans.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* ==========================================================================
   NIGHT WATCH (dark) — default
   ========================================================================== */
:root {
  color-scheme: dark;

  /* surfaces + ink */
  --page: #0F1310;  --surface: #151A16;  --surface2: #1B211C;  --surface3: #222923;  --elevated: #222923;
  --border: rgba(234,230,218,0.14);  --border2: rgba(234,230,218,0.26);
  --hairline: rgba(234,230,218,0.14);  --graticule: rgba(234,230,218,0.06);
  --text: #EAE6DA;  --text2: #A8A69A;  --text3: #6E6F65;

  /* accent = chalk flood (structural emphasis); grease = orders/alarms only */
  --accent: #EAE6DA;  --accent-hover: #F7F3E7;  --accent2: #6FA8CE;  --on-accent: #0F1310;
  --accent-soft: rgba(234,230,218,0.14);
  --green: #84A96B;  --red: #D43425;  --orange: #D08B3C;  --blue: #6FA8CE;  --purple: #8C7DB6;  --gold: #B8922E;
  --green-soft: rgba(132,169,107,0.14);  --orange-soft: rgba(208,139,60,0.14);  --red-soft: rgba(212,52,37,0.14);
  --blue-soft: rgba(111,168,206,0.14);  --purple-soft: rgba(140,125,182,0.14);
  --green-on: #A6C48F;  --orange-on: #E3AC6A;  --red-on: #F2705F;  --blue-on: #9CC3DF;

  --grease: #D43425;  --grease-text: #F2705F;  --on-grease: #FFFFFF;
  --sector-red: #B0453A;  --sector-ochre: #C9A227;  --sector-ochre-text: #C9A227;  --sector-blue: #4E7A9E;

  /* material (all flat) */
  --glass1: #151A16;  --glass2: #151A16;  --glass-edge: rgba(234,230,218,0.14);  --glass-hi: rgba(234,230,218,0.35);
  --input-bg: rgba(234,230,218,0.04);  --sheen: #151A16;
  --scrim: rgba(15,19,16,0.85);  --on-scrim: #EAE6DA;
  --glow: transparent;  --shadow-color: rgba(0,0,0,0.45);
  --red-hover: #E04B37;  --link: #F2705F;

  /* composites */
  --card-bg: var(--surface);
  --glass-blur: 0px;
  --focus-ring: 0 0 0 2px var(--page), 0 0 0 4px var(--grease);
  --page-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23EAE6DA'%3E%3Cpath stroke-opacity='.06' d='M24 0V96M48 0V96M72 0V96M0 24H96M0 48H96M0 72H96'/%3E%3Cpath stroke-opacity='.1' d='M0 0H96M0 0V96'/%3E%3C/g%3E%3C/svg%3E");
  --page-size: 96px 96px;  --page-repeat: repeat;

  /* JS-compat aliases (embedded in kept functional code) */
  --chalk3: var(--text3);
  --ready-green: var(--green);

  /* ---- capability tokens (flat/instant; scanner + redaction are explicit) ---- */
  --mo-reveal: 0ms;  --mo-state: 100ms;  --mo-hover: 130ms;  --mo-press: 80ms;
  --mo-trace: 500ms;  --mo-emph: 170ms;  --mo-ambient: 1; /* instruments loop forever */
  --ease-enter: linear;
  --ease-state: cubic-bezier(0.2,0.9,0.25,1);
  --ease-strike: cubic-bezier(0.85,0,0.15,1);
  --reveal-rise: 0px;
  --r-card: 4px;  --r-ctl: 4px;  --r-chip: 3px;  --r-micro: 2px;  --r-lamp: 1px;
  --glow-r: 0px;
  --shadow-pop: none;
  --shadow-dialog: 0 18px 40px rgba(0,0,0,0.45);
  --track-display: 0.5px;
  --display-case: uppercase;
  --display-lh: 1.04;
  --fresh-glyph: triangle;
  --meter-style: ticked;

  /* ---- type + layout ---- */
  --font-ui: "Public Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-stencil: "Big Shoulders Stencil", "Big Shoulders", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --font-wordmark: "Big Shoulders", "Arial Narrow", sans-serif;
  --fs-0: 11px;  --fs-1: 13px;  --fs-2: 16px;  --fs-3: 18px;  --fs-4: 22px;
  --fs-5: clamp(24px, 3.2vw, 32px);  --fs-6: clamp(34px, 5vw, 48px);
  --fs-hero: clamp(38px, 6.5vw, 68px);
  --container: 1080px;
  --container-wide: 1240px;
}

/* ==========================================================================
   DAY CHART (light)
   ========================================================================== */
:root[data-mode="light"] {
  color-scheme: light;
  --page: #EDE7D8;  --surface: #F6F1E4;  --surface2: #E4DECD;  --surface3: #DAD4C2;  --elevated: #DAD4C2;
  --border: rgba(33,38,31,0.22);  --border2: rgba(33,38,31,0.34);
  --hairline: rgba(33,38,31,0.22);  --graticule: rgba(33,38,31,0.08);
  --text: #21261F;  --text2: #565B4E;  --text3: #8A8B7E;
  --accent: #21261F;  --accent-hover: #11150F;  --accent2: #33648C;  --on-accent: #F6F1E4;
  --accent-soft: rgba(33,38,31,0.10);
  --green: #4F7A3A;  --red: #A32B1C;  --orange: #A96A1F;  --blue: #33648C;  --purple: #6A5B99;  --gold: #8A6410;
  --green-soft: rgba(79,122,58,0.14);  --orange-soft: rgba(169,106,31,0.14);  --red-soft: rgba(163,43,28,0.12);
  --blue-soft: rgba(51,100,140,0.12);  --purple-soft: rgba(106,91,153,0.12);
  --green-on: #3D5F2D;  --orange-on: #7E4F17;  --red-on: #A32B1C;  --blue-on: #2A527A;
  --grease: #A32B1C;  --grease-text: #A32B1C;  --on-grease: #F6F1E4;
  --sector-red: #8E3229;  --sector-ochre: #C9A227;  --sector-ochre-text: #8A6410;  --sector-blue: #3A607F;
  --glass1: #F6F1E4;  --glass2: #F6F1E4;  --glass-edge: rgba(33,38,31,0.22);  --glass-hi: rgba(33,38,31,0.35);
  --input-bg: rgba(33,38,31,0.05);  --sheen: #F6F1E4;
  --scrim: rgba(15,19,16,0.80);  --on-scrim: #EAE6DA;
  --shadow-color: rgba(33,38,31,0.25);
  --red-hover: #8F2518;  --link: #A32B1C;
  --page-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%2321261F'%3E%3Cpath stroke-opacity='.08' d='M24 0V96M48 0V96M72 0V96M0 24H96M0 48H96M0 72H96'/%3E%3Cpath stroke-opacity='.12' d='M0 0H96M0 0V96'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   Reduced motion — freeze the scanner + any transitions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root { --mo-state: 0ms; --mo-hover: 0ms; --mo-press: 0ms; --mo-trace: 0ms; --mo-emph: 0ms; --mo-ambient: 0; }
}