/* Handsome brand — CSS custom properties. Mirror of tokens/tokens.json (source of truth).
   Two-layer architecture (TA-1):
   Layer 1 (this :root block) — theme-invariant primitives: raw brand colors,
   type, space, radius, shadow. Never branch these on data-theme.
   Layer 2 (below) — per-theme semantics (--surface-*, --text-*, --link, etc.)
   that components must reference instead of Layer 1 primitives, except where
   a primitive IS the intended fixed value regardless of theme (buttons
   --color-accent, skip-link navy, the hero's fixed navy instrument surface). */
:root {
  /* Color — primitives */
  --color-navy: #0A1A2F;
  --color-accent: #1A6FE8;   /* R6.1 a11y (HM ruling): darkened from #1B75F5 so white-on-primary-.btn clears AA 4.5:1 (was 4.28 → 4.68); change is imperceptible and still clears the ≥3:1 focus-ring on night */
  --color-cream: #F5EFE6;
  --color-ink: #0A0A0A;
  --color-white: #FFFFFF;
  --color-gray: #9CA3AF;
  --color-border: #E5E0D6;
  /* Functional/status hues — deliberate non-semantic exceptions (same class
     as the .error red in app.css): fixed meanings, never theme-branched, never
     used as a general brand fill. */
  --signal-live: #2FBF8F;   /* functional status hue — LIVE/online only, never a brand fill (see app.css .error exception) */
  --accent-text: #1560D8;   /* AA-safe accent for body text/links on light (bright --color-accent fails 4.5:1 on white) */

  /* First Light palette (brief §3/§9) — the celestial primitives. Night carries
     structure, blue is the working accent, gold/dawn stays precious, cream is a
     light touch (never a big surface). These are theme-invariant raw values;
     Layer-2 below maps them onto semantics per theme. */
  /* Night (structure, backgrounds) */
  --night-900: #05091A;
  --night-800: #0B1730;
  --night-700: #1C1A3E;
  --twilight-600: #3E2A54;
  /* Dawn (horizon, warmth, "arrival") */
  --dawn-rose-deep: #7A4A5E;
  --dawn-rose: #B9765C;
  --dawn-amber: #E4AE72;
  --dawn-gold: #F0C982;
  /* Accents — blue is the working accent, gold stays precious */
  --starlight-blue: #7E97E6;
  --starlight-blue-lt: #B9C8F2;
  --star-gold: #F2D592;
  --star-gold-soft: #F6E4B0;
  --star-gold-glow: #FBE3A8;
  /* Cream / light touches (text, starlight, hairlines — NOT a background panel) */
  --cream: #F3ECDD;
  --cream-bright: #F7F1E4;
  --muted-violet: #C6BAD4;
  --muted-blue: #9AA6C6;
  --muted-blue-deep: #565E79;   /* R6 a11y: deep sibling of --muted-blue for muted text on the light cream surface (clears AA 4.5:1) */
  /* Light-theme contrast accents (§9 — deeper so contrast holds on cream) */
  --link-on-light: #3F5BB8;
  --star-on-light: #C8912F;
  /* CTA gradient stops — the "sun cresting" primary button (§3) */
  --cta-gold: #F2CE86;
  --cta-amber: #E39A6E;
  --cta-ink: #241226;

  /* Color — semantic primitives that don't change with theme (the hero is a
     fixed navy instrument surface in both light and dark). */
  --surface-dark: var(--color-navy);
  --surface-warm: var(--color-cream);
  --text-on-dark: var(--color-white);
  --text-on-warm: var(--color-ink);

  /* Type — Departure-Board stacks (design go-live 2026-08-03). Three roles:
     display (headlines), body (text + labels + Hebrew status words), mono
     (Latin/numeric data only — IBM Plex Mono has NO Hebrew glyphs, so Hebrew
     never routes through it). Faces are self-hosted @font-face in app.css. */
  --font-display: 'Secular One', 'Heebo', 'Noto Sans Hebrew', sans-serif;
  --font-body:    'Assistant', 'Heebo', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Noto Sans Mono', 'DejaVu Sans Mono', ui-monospace, monospace;
  /* --font-stack stays the site-wide default body face (unchanged). The three
     Departure-Board stacks above are consumed ONLY by the .lv1 landing (v1);
     the founder ruled (2026-08-03) that existing pages keep Inter/Heebo until a
     separate deliberate typography rollout. Do NOT point --font-stack at
     var(--font-body). */
  --font-stack: Inter, Heebo, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fs-eyebrow: 14px;
  --fs-body: 16px;
  --fs-h3card: 20px;
  --fs-h3: 36px;
  --fs-h1: 48px;
  --lh-tight: 1.1;
  --lh-normal: 1.6;
  --ls-eyebrow: 0.18em;
  --ls-tight: -0.01em;

  /* Space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* Radius */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 4px 16px rgba(10,26,47,0.08);
}

/* Layer 2 — per-theme semantics. Explicit choice via data-theme="light|dark"
   on <html> (stamped server-side from the hh_theme cookie, or client-side by
   theme-init.js). Components must reference these semantics only. */
:root[data-theme='light'] {
  /* First Light light = daylight after the dawn: warm cream surface, navy
     structure, deeper blue link + deeper star gold so contrast holds (§9). */
  --surface-page: var(--color-cream);
  --surface-raised: var(--color-white);
  --surface-inset: var(--color-navy);
  --text-default: var(--color-ink);
  --text-muted: var(--muted-blue-deep);
  --text-on-panel: var(--color-white);
  --border-subtle: var(--color-border);
  --link: var(--link-on-light);
  --control: var(--color-accent);
  --brand-star: var(--star-on-light);
  --danger: #B00020;
  color-scheme: light;
}
:root[data-theme='dark'] {
  /* First Light dark = the full celestial night system (brief §9). */
  --surface-page: var(--night-800);
  --surface-raised: var(--night-700);
  --surface-inset: var(--night-900);
  --text-default: var(--cream);
  --text-muted: var(--muted-blue);   /* captions on night — clears AA on night-800; verify */
  --text-on-panel: var(--cream);
  --border-subtle: rgba(255,255,255,.12);
  --link: var(--starlight-blue);
  --control: var(--color-accent);
  --brand-star: var(--star-gold);    /* gold star on the night */
  --danger: #FF6B7A;          /* functional red readable on night */
  color-scheme: dark;
}

/* No-signal default (RULING: system-preference default, LIGHT no-signal
   fallback — never dark-first). The light semantics are duplicated onto the
   bare :root below so a document with NO data-theme attribute and NO JS
   still renders light. The media-query block promotes to dark ONLY when the
   OS asks for it AND there is no explicit data-theme attribute present —
   :root:not([data-theme]) never matches once data-theme is set, so an
   explicit data-theme="light" or data-theme="dark" always wins over the
   media query regardless of source order. */
:root {
  --surface-page: var(--color-cream);
  --surface-raised: var(--color-white);
  --surface-inset: var(--color-navy);
  --text-default: var(--color-ink);
  --text-muted: var(--muted-blue-deep);
  --text-on-panel: var(--color-white);
  --border-subtle: var(--color-border);
  --link: var(--link-on-light);
  --control: var(--color-accent);
  --brand-star: var(--star-on-light);
  --danger: #B00020;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-page: var(--night-800);
    --surface-raised: var(--night-700);
    --surface-inset: var(--night-900);
    --text-default: var(--cream);
    --text-muted: var(--muted-blue);
    --text-on-panel: var(--cream);
    --border-subtle: rgba(255,255,255,.12);
    --link: var(--starlight-blue);
    --control: var(--color-accent);
    --brand-star: var(--star-gold);
    --danger: #FF6B7A;
    color-scheme: dark;
  }
}