/* omkarux tokens: extracted from site-stopgap/index.html (Horizons), 30 Sep 2026.
   The single source for the live site's shared stylesheet at the port. Copy, don't retype.
   Layers: LOCKED (status vocabulary, never generated), SHAPE + MOTION, ACTION + EMPHASIS, GLASS, MOOD (ambient only).
   Rules that go with them: SHAPE-MOTION.md. */
:root {
  --paper: #FAFAF7; --ink: #1D1F23; --muted: #62646B; --hairline: #E2E1DA; --card: #FFFFFF; --chip: #F1F0EA;
  /* red means Critical, and nothing else: not the brand, not a button, not a hover, not focus. The page practises its own rule */
  --red: #D4362C; --on-red: #FFFFFF; --red-ink: #B7301F; --red-soft: #FBEAE8;
  /* the brand's action colour is ink: it can never be mistaken for a severity */
  --accent: var(--ink); --on-accent: var(--paper); --accent-hover: #34373D; --focus: var(--ink);
  /* EMPHASIS SURFACE — the one container that stands apart (the pilot offer). Inverse in light; in dark it is a raised
     tonal surface, never a white slab: large bright areas glare on a dark page */
  --emph-bg: #1D1F23; --emph-fg: #FAFAF7; --emph-muted: #B9BBC0; --emph-edge: transparent; --emph-action: #FAFAF7; --on-emph-action: #1D1F23;
  --ok: #2F6B3F; --ok-soft: #E7F1E9; --warn: #8A6212; --warn-soft: #F8EFDC;
  /* status vocabulary: one word, one colour, every mood */
  --st-critical-bg: #D4362C; --st-critical-fg: #FFFFFF;
  --st-high-bg: #F8EFDC; --st-high-fg: #6E4E0E;
  --st-attn-bg: #F1F0EA; --st-attn-fg: #1D1F23;
  --st-ok-bg: #E7F1E9; --st-ok-fg: #2F6B3F;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Plex Mono", ui-monospace, Menlo, monospace;
  /* SHAPE + MOTION — one system for every surface (site, OG images, banners) */
  --r-xs: 6px;        /* marks: status chips, draft marks, swatches, tooltips */
  --r-md: 14px;       /* cards: entries, figures, add-ons, gates, offer */
  --r-lg: 22px;       /* stages: art, estate, stance panels */
  --r-pill: 999px;    /* anything you press or type in: buttons, tabs, inputs, controls */
  --radius: var(--r-md);
  --ease-spring: cubic-bezier(.3, 1.25, .4, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .18s; --t-move: .42s;
  --lift: translateY(-2px);
  --shadow-lift: 0 2px 4px rgba(29,31,35,.06), 0 12px 28px rgba(29,31,35,.10);
  --shadow: 0 1px 2px rgba(29,31,35,.05), 0 4px 14px rgba(29,31,35,.06);
  --wrap: 1080px;
  /* GLASS — the one floating surface: header capsule, art bar, story bar, the 3D card. Always over content, never a card */
  --glass-bg: color-mix(in srgb, var(--card) 82%, transparent);
  --glass-edge: color-mix(in srgb, var(--hairline) 80%, transparent);
  --glass-blur: blur(14px) saturate(1.2);
  /* ICONS — one sprite (#i-*): 24px grid, 1.75 stroke, round caps and joins; 18px in controls, 15–16px beside text */
  /* =================================================================
     MOOD LAYER — generated / rotated weekly. Ambient only: hero art,
     chapter textures. Never used for text, status or controls.
     ================================================================= */
  --mood-a: #6B7A4A; --mood-b: #B9AE9C; --mood-c: #E9E3D3; --mood-dot: #1D1F23;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #15171B; --ink: #EBECEE; --muted: #A2A5AD; --hairline: #2A2D33; --card: #1C1F24; --chip: #24272D;
    --red: #FF5B4F; --on-red: #15171B; --red-ink: #FF7A70; --red-soft: #3A211F;
    --ok: #6FBF83; --ok-soft: #1F3326; --warn: #D9A441; --warn-soft: #3A2F1A;
    --st-critical-bg: #FF5B4F; --st-critical-fg: #1A0B09;
    --st-high-bg: #3A2F1A; --st-high-fg: #F0C46A;
    --st-attn-bg: #24272D; --st-attn-fg: #EBECEE;
    --st-ok-bg: #1F3326; --st-ok-fg: #8FD6A1;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35); --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.45);
    --mood-c: #202227; --mood-dot: #EBECEE;
    --accent: #CDD0D5; --on-accent: #15171B; --accent-hover: #E1E3E6;
    --emph-bg: linear-gradient(180deg, #262A31, #1F2227); --emph-fg: #EBECEE; --emph-muted: #A2A5AD; --emph-edge: #353A42; --emph-action: #CDD0D5; --on-emph-action: #15171B;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #CDD0D5; --on-accent: #15171B; --accent-hover: #E1E3E6;
  --emph-bg: linear-gradient(180deg, #262A31, #1F2227); --emph-fg: #EBECEE; --emph-muted: #A2A5AD; --emph-edge: #353A42; --emph-action: #CDD0D5; --on-emph-action: #15171B;

  --paper: #15171B; --ink: #EBECEE; --muted: #A2A5AD; --hairline: #2A2D33; --card: #1C1F24; --chip: #24272D;
  --red: #FF5B4F; --on-red: #15171B; --red-ink: #FF7A70; --red-soft: #3A211F;
  --ok: #6FBF83; --ok-soft: #1F3326; --warn: #D9A441; --warn-soft: #3A2F1A;
  --st-critical-bg: #FF5B4F; --st-critical-fg: #1A0B09;
  --st-high-bg: #3A2F1A; --st-high-fg: #F0C46A;
  --st-attn-bg: #24272D; --st-attn-fg: #EBECEE;
  --st-ok-bg: #1F3326; --st-ok-fg: #8FD6A1;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35); --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.45);
  --mood-c: #202227; --mood-dot: #EBECEE;
}

[data-mood="woven"] { --mood-a: #B5523B; --mood-b: #2F6E73; --mood-c: #EFE6D6; }

[data-mood="topographic"] { --mood-a: #6B7A4A; --mood-b: #8A6D3B; --mood-c: #ECE6D6; }

[data-mood="kolam"] { --mood-a: #C98A2E; --mood-b: #B9AE9C; --mood-c: #F1EBDF; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-mood="woven"], :root:not([data-theme="light"]) [data-mood="woven"] { --mood-c: #231d1a; }
  :root:not([data-theme="light"])[data-mood="topographic"], :root:not([data-theme="light"]) [data-mood="topographic"] { --mood-c: #1e211b; }
  :root:not([data-theme="light"])[data-mood="kolam"], :root:not([data-theme="light"]) [data-mood="kolam"] { --mood-c: #231f18; }
}

:root[data-theme="dark"][data-mood="woven"], :root[data-theme="dark"] [data-mood="woven"] { --mood-c: #231d1a; }

:root[data-theme="dark"][data-mood="topographic"], :root[data-theme="dark"] [data-mood="topographic"] { --mood-c: #1e211b; }

:root[data-theme="dark"][data-mood="kolam"], :root[data-theme="dark"] [data-mood="kolam"] { --mood-c: #231f18; }

:root { --hd: 64px; --hd-now: 64px; }

@media (max-width: 640px) { :root { --hd: 56px; --hd-now: 56px; } }