/**
 * Design Tokens — hazzard-api operator console
 *
 * Ported from the web app's app/globals.css (../web), which is CANONICAL:
 * copy changes over by hand. Same three layers:
 *
 *   1. PRIMITIVES  storm-*, gauge-blue, status-*, signal, console-*.
 *      Light values on :root, dark values under [data-theme="dark"].
 *   2. SEMANTIC    background, foreground, primary, muted, border, input,
 *      ring … (the shadcn contract web uses) plus the ink-opacity helpers
 *      --ink-N. Components consume these.
 *   3. LEGACY      the console's pre-port names (--color-bg, --surface,
 *      --accent, --text-dim, --color-slate-*, …) mapped onto layer 2 so
 *      every existing template re-themes without edits. New CSS should not
 *      reach for these; C3 retires them.
 *
 * The theme follows <html data-theme>, stamped server-side from the
 * `hz-theme` cookie (light|dark) or, for "system"/no cookie, by the inline
 * init script in templates/_head.html before first paint (DECISIONS
 * 2026-10-01, superseding the 2026-09-26 "always dark" entry).
 *
 * This file is the ONE place a colour literal may live
 * (tests/unit/test_console_templates.py).
 *
 * Signal cyan is reserved for map/footprint data, never a general accent.
 */

/* ===========================================================================
 * FONTS — vendored variable woff2 (latin subset, fontsource 5.3.0, OFL;
 * licences beside the files). Inter is the interface face, Spline Sans
 * Mono the mono face, as in web.
 * =========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/spline-sans-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("/static/fonts/spline-sans-mono-latin-wght-normal.woff2") format("woff2");
}

/* ===========================================================================
 * 1. PRIMITIVES — light (default)
 * =========================================================================== */

:root {
  color-scheme: light;

  --color-storm-bg: #F3F5F7;
  --color-storm-ink: #1A2330;
  --color-storm-muted: #5C6A78;
  --color-surface: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-gauge-blue: #1E4FD0;
  --color-status-green: #157A4B;
  --color-status-amber: #9A5B08;
  --color-status-red: #B42318;
  --color-signal: #0E7490;

  /* Static in both themes: the console ground (log terminal, the always-dark
   * strip) and rendered paper (a PDF page is white whatever the theme). */
  --color-console-bg: #0C1723;
  --color-console-fg: #E7EEF5;
  --color-console-muted: #8FA5B8;
  --color-paper: #FFFFFF;
  /* A neutral scrim over whatever the page is (dialog backdrops). */
  --color-scrim: #0C1723;
}

/* ===========================================================================
 * 1b. PRIMITIVES — dark
 * =========================================================================== */

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

  --color-storm-bg: #0C1723;
  --color-storm-ink: #E7EEF5;
  --color-storm-muted: #8FA3B5;
  --color-surface: #16232F;
  --color-on-accent: #0C1723;
  --color-gauge-blue: #5B8DEF;
  --color-status-green: #34C08A;
  --color-status-amber: #E8A33D;
  --color-status-red: #F2655B;
  --color-signal: #3DDBE6;
}

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

/* ===========================================================================
 * 2 + 3. SEMANTIC, INK HELPERS, LEGACY ALIASES
 *
 * A custom property substitutes its var() where it is DEFINED, so aliases
 * declared only on :root would stay resolved against the light primitives
 * under a dark island. Declaring them on every theme root (one rule, three
 * selectors) re-resolves them wherever the primitives flip — the one-copy
 * equivalent of web's three alias blocks.
 * =========================================================================== */

:root,
[data-theme="dark"],
[data-theme="light"] {
  /* --- semantic (web's shadcn contract) ---------------------------------- */
  --color-background: var(--color-storm-bg);
  --color-foreground: var(--color-storm-ink);
  --color-card: var(--color-surface);
  --color-card-foreground: var(--color-storm-ink);
  --color-popover: var(--color-surface);
  --color-popover-foreground: var(--color-storm-ink);
  --color-primary: var(--color-gauge-blue);
  --color-primary-foreground: var(--color-on-accent);
  --color-secondary: color-mix(in oklab, var(--color-storm-ink) 8%, var(--color-surface));
  --color-secondary-foreground: var(--color-storm-ink);
  --color-muted: color-mix(in oklab, var(--color-storm-ink) 6%, var(--color-storm-bg));
  --color-muted-foreground: color-mix(in oklab, var(--color-storm-ink) 62%, transparent);
  /* web meaning: a hover/selected wash, NOT an accent hue. */
  --color-accent: color-mix(in oklab, var(--color-storm-ink) 6%, var(--color-surface));
  --color-accent-foreground: var(--color-storm-ink);
  --color-destructive: var(--color-status-red);
  --color-destructive-foreground: var(--color-on-accent);
  --color-border: color-mix(in oklab, var(--color-storm-ink) 10%, transparent);
  --color-input: color-mix(in oklab, var(--color-storm-ink) 15%, transparent);
  --color-ring: var(--color-gauge-blue);

  --color-chart-1: var(--color-gauge-blue);
  --color-chart-2: var(--color-signal);
  --color-chart-3: var(--color-status-amber);
  --color-chart-4: var(--color-status-green);
  --color-chart-5: var(--color-storm-muted);

  /* --- ink-opacity helpers: web's `storm-ink/N` utilities ----------------- */
  --ink-2: color-mix(in oklab, var(--color-storm-ink) 2.5%, transparent);
  --ink-3: color-mix(in oklab, var(--color-storm-ink) 3%, transparent);
  --ink-5: color-mix(in oklab, var(--color-storm-ink) 5%, transparent);
  --ink-10: color-mix(in oklab, var(--color-storm-ink) 10%, transparent);
  --ink-15: color-mix(in oklab, var(--color-storm-ink) 15%, transparent);
  --ink-20: color-mix(in oklab, var(--color-storm-ink) 20%, transparent);
  --ink-25: color-mix(in oklab, var(--color-storm-ink) 25%, transparent);
  --ink-30: color-mix(in oklab, var(--color-storm-ink) 30%, transparent);
  --ink-40: color-mix(in oklab, var(--color-storm-ink) 40%, transparent);
  --ink-50: color-mix(in oklab, var(--color-storm-ink) 50%, transparent);
  --ink-60: color-mix(in oklab, var(--color-storm-ink) 60%, transparent);
  --ink-70: color-mix(in oklab, var(--color-storm-ink) 70%, transparent);

  /* --- LEGACY: the console's pre-port names --------------------------------
   * Every name a template, CSS or JS file referenced on 2026-10-01 resolves
   * here. Values are theme-aware mixes, never literals. */
  --color-bg: var(--color-storm-bg);
  --color-surface-2: color-mix(in oklab, var(--color-storm-ink) 4%, var(--color-surface));
  --color-surface-hover: color-mix(in oklab, var(--color-storm-ink) 6%, var(--color-surface));
  --color-border-strong: var(--ink-20);
  --color-text: var(--color-storm-ink);
  --color-text-muted: var(--color-storm-muted);
  --color-text-dim: var(--ink-60);

  --color-slate-50: var(--color-surface-2);
  --color-slate-100: var(--color-surface-hover);
  --color-slate-200: var(--ink-10);
  --color-slate-300: var(--ink-20);
  --color-slate-400: var(--ink-40);
  --color-slate-500: var(--color-storm-muted);
  --color-slate-600: var(--ink-70);
  --color-slate-700: color-mix(in oklab, var(--color-storm-ink) 80%, transparent);
  --color-slate-800: color-mix(in oklab, var(--color-storm-ink) 90%, transparent);
  --color-slate-900: var(--color-storm-ink);

  --color-primary-hover: color-mix(in oklab, var(--color-gauge-blue) 85%, var(--color-storm-ink));
  --color-primary-muted: color-mix(in oklab, var(--color-gauge-blue) 12%, transparent);
  --color-primary-border: color-mix(in oklab, var(--color-gauge-blue) 35%, transparent);
  --color-on-primary: var(--color-on-accent);

  --color-signal-muted: color-mix(in oklab, var(--color-signal) 12%, transparent);
  --color-signal-border: color-mix(in oklab, var(--color-signal) 35%, transparent);

  --color-success: var(--color-status-green);
  --color-success-muted: color-mix(in oklab, var(--color-status-green) 12%, transparent);
  --color-success-border: color-mix(in oklab, var(--color-status-green) 30%, transparent);
  --color-warning: var(--color-status-amber);
  --color-warning-muted: color-mix(in oklab, var(--color-status-amber) 12%, transparent);
  --color-warning-border: color-mix(in oklab, var(--color-status-amber) 30%, transparent);
  --color-danger: var(--color-status-red);
  --color-danger-muted: color-mix(in oklab, var(--color-status-red) 12%, transparent);
  --color-danger-border: color-mix(in oklab, var(--color-status-red) 30%, transparent);
  --color-info: var(--color-gauge-blue);
  --color-info-muted: color-mix(in oklab, var(--color-gauge-blue) 12%, transparent);
  --color-info-border: color-mix(in oklab, var(--color-gauge-blue) 30%, transparent);

  /* Form-control ground: white with a shadow in light, an ink wash in dark
   * (web Input's structural dark swap). Overridden for dark below. */
  --input-bg: var(--color-surface);
  --input-shadow: var(--shadow-sm);

  --shadow-glow-primary: 0 0 0 3px color-mix(in oklab, var(--color-gauge-blue) 18%, transparent);

  --bg: var(--color-bg);
  --bg-secondary: var(--color-surface-2);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --surface-hover: var(--color-surface-hover);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-secondary: var(--color-text-muted);
  --text-dim: var(--color-text-dim);
  --text-accent: var(--color-primary);
  --accent: var(--color-primary);
  --accent-2: var(--color-primary);
  --accent-grad: var(--color-primary);
  --accent-info: var(--color-info);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
  --ok: var(--color-success);
  --warn: var(--color-warning);
  --glow-accent: var(--shadow-glow-primary);
  --slate-50: var(--color-slate-50);
  --slate-100: var(--color-slate-100);
  --slate-200: var(--color-slate-200);
  --slate-300: var(--color-slate-300);
  --slate-400: var(--color-slate-400);
  --slate-500: var(--color-slate-500);
  --slate-600: var(--color-slate-600);
  --slate-700: var(--color-slate-700);
  --slate-800: var(--color-slate-800);
  --slate-900: var(--color-slate-900);
  --indigo-500: var(--color-primary);
  --indigo-600: var(--color-primary);
  --indigo-700: var(--color-primary-hover);
}

[data-theme="dark"] {
  --input-bg: color-mix(in oklab, var(--color-storm-ink) 5%, transparent);
  --input-shadow: none;
}

/* ===========================================================================
 * NON-COLOUR TOKENS (theme-independent)
 * =========================================================================== */

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mono: var(--font-mono);

  /* Type scale (web): xs 12/20, sm 14/20 (nav, controls), base 14/24
   * (prose, cells), md 16/24, lg 18/24, xl 20/28 (page headings).
   * Nothing below 12px anywhere in the console. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  --leading-tight: 1.25;
  --leading-snug: 1.4286;   /* 20 / 14 */
  --leading-normal: 1.5;
  --leading-relaxed: 1.7143; /* 24 / 14 */

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.08em;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 999px;

  /* Tailwind's sm / md / lg — the old 0.4–0.55 alpha shadows were tuned
   * for a black ground and read as smudges on light. */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;

  --z-sticky: 20;
  --z-dropdown: 30;
  --z-modal: 50;
  --z-toast: 60;
  --z-tooltip: 70;
}

/* ===========================================================================
 * BASE RESET & DEFAULTS
 * =========================================================================== */

* { box-sizing: border-box; }

html {
  background: var(--color-storm-bg);
}

::selection {
  background: color-mix(in oklab, var(--color-gauge-blue) 28%, transparent);
  color: var(--color-storm-ink);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-20);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-storm-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-40); }

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* ===========================================================================
 * TYPOGRAPHY BASE
 * =========================================================================== */

body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11";
  margin: 0;
  min-height: 100vh;
  background: var(--color-storm-bg);
  color: var(--color-storm-ink);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-storm-ink);
  margin: 0;
  line-height: var(--leading-tight);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-xl);
  line-height: 1.75rem;
  margin-bottom: var(--space-2);
}

h2 { font-size: var(--text-lg); line-height: 1.5rem; }

h3 {
  font-size: var(--text-md);
  line-height: 1.5rem;
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

h5, h6 { font-size: var(--text-sm); }

code {
  font-family: var(--font-mono);
  font-size: max(0.75rem, 0.9em);
  color: var(--color-gauge-blue);
}

a {
  color: var(--color-gauge-blue);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

.muted {
  color: var(--color-storm-muted);
  font-size: var(--text-base);
}

/* ===========================================================================
 * FORM ELEMENTS (web Input: surface ground, ink-15 edge, ring on focus)
 * =========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
textarea,
select {
  padding: 0.375rem 0.625rem;
  background: var(--input-bg);
  border: 1px solid var(--color-input);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.5rem;
  font-family: inherit;
  color: var(--color-storm-ink);
  box-shadow: var(--input-shadow);
  transition: border-color var(--transition-base), outline var(--transition-base);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select { min-height: 2.375rem; }

select option {
  background: var(--color-surface);
  color: var(--color-storm-ink);
}

:is(input, textarea, select):hover { border-color: var(--ink-20); }

:is(input, textarea, select):focus {
  outline: 2px solid var(--color-ring);
  outline-offset: 0;
  border-color: transparent;
}

::placeholder { color: var(--color-storm-muted); opacity: 1; }

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-storm-ink);
  margin-bottom: var(--space-1);
}

/* ===========================================================================
 * PRE / CODE BLOCKS — a quiet well that follows the theme. (The log
 * terminal is the one always-dark surface; see logview.css.)
 * =========================================================================== */

pre {
  background: var(--color-surface-2);
  color: var(--color-storm-ink);
  border: 1px solid var(--color-border);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-size: var(--text-xs);
  line-height: 1.25rem;
  font-family: var(--font-mono);
  margin: 0;
}

/* ===========================================================================
 * UTILITY CLASSES
 * =========================================================================== */

.mono-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-storm-muted);
}

.text-center { text-align: center; }
.text-right { text-align: right; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

form.inline { display: inline; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}