/* ==========================================================================
   Design tokens: every colour on the site comes from this file.

   1. BRAND PALETTE: raw values only. This is the swap point for Megan's
      Figma variables: when they land, change the values here (keep the names,
      or rename and update section 2) and the whole site follows.
   2. SEMANTIC ROLES: what each colour is FOR (bg, text, muted, data,
      governed, accent...). site.css only uses these roles, plus the scene
      tokens for the hero background. Defined for the dark theme (default) and
      the light theme.

   Colour meaning: --data (blue) = data in motion; --governed (gold) = governed
   by EndPoint Zero policy.
   Theme is set on <html data-theme="light|dark"> by the inline script in each
   page's <head>; without JS, prefers-color-scheme decides.
   Header and footer stay navy in both themes. The hero follows the theme: in
   light theme it sits over a pale dawn version of the horizon (section 3).
   All text pairs below pass WCAG AA (4.5:1) on --bg and --bg-raised.
   Glass (--glass-*): every section is see-through, so the horizon shows behind the
   whole page and its text sits on glass panels; set for dark, light and the Karina
   palette (sections 2 and 4).

   REVIEW TOGGLES (URL parameters, read by the inline script in each page's <head>;
   they only affect the page they're on, for side-by-side comparison):
     ?horizon=band  light theme keeps the previous treatment: a dark horizon
                    behind a dark hero (sets <html data-horizon="band">).
     ?centre=shield is read by js/epz-flow.js (see js/epz-flow-data.js).
     ?palette=karina  switches to the alternate palette in section 4 and keeps it
                    for the rest of the tab session (sessionStorage); ?palette=default
                    switches back (<html data-palette="karina">).
   ========================================================================== */

/* 1. BRAND PALETTE (raw values) ------------------------------------------- */
:root {
  /* Navy and neutrals */
  --palette-navy-950: #000626;      /* brand navy */
  --palette-navy-900: #050C30;
  --palette-navy-850: #0B1235;
  --palette-offwhite: #F4F8FF;
  --palette-white: #FFFFFF;
  --palette-black: #000000;
  --palette-grey-400: #9AA0B1;
  --palette-grey-700: #555B6B;
  --palette-paper: #FAF9F7;

  /* Brand blues (fills behind light text only) */
  --palette-blue-600: #374F9F;
  --palette-blue-700: #203782;

  /* EPZ accents: signal blue (data) and gold (governed) */
  --palette-sky-300: #7FD1FF;
  --palette-sky-800: #0A6A9C;
  --palette-gold-400: #D4A84B;
  --palette-gold-800: #7A5A12;
  --palette-red-300: #FF8A80;
  --palette-red-700: #B3261E;

  /* EPZ product UI (ui-main colors.css): raw values behind the --graph-* roles.
     Dark set first, then the light set (the product has no light set yet). */
  --palette-epz-black: #000000;
  --palette-epz-card: #0F1013;
  --palette-epz-line: #354F5F;
  --palette-epz-meta: #7D96A5;
  --palette-epz-accent: #18A8BE;
  --palette-epz-accent-bright: #29C2DA;
  --palette-epz-active: #42F7A8;
  --palette-epz-interrupted: #D0A51A;
  --palette-epz-blocked: #F3210E;
  --palette-epz-pending: #1767C9;
  --palette-epz-lvl-u: #3FBF74;
  --palette-epz-lvl-cui: #A07BE6;
  --palette-epz-lvl-s: #EF4A5A;
  --palette-epz-canvas-light: #F1F4F7;
  --palette-epz-line-light: #C3D0D8;
  --palette-epz-ink: #263750;
  --palette-epz-meta-light: #5A7180;
  --palette-epz-accent-light: #1A778A;
  --palette-epz-accent-bright-light: #1F94A6;
  --palette-epz-active-light: #087D5B;
  --palette-epz-interrupted-light: #A27D0A;
  --palette-epz-blocked-light: #C3281B;
  --palette-epz-lvl-u-light: #11804A;
  --palette-epz-lvl-cui-light: #6B3FB8;
  --palette-epz-lvl-s-light: #C8102E;

  /* Transparent variants of the colours above */
  --palette-grey-400-a15: rgba(154, 160, 177, 0.15);
  --palette-grey-400-a18: rgba(154, 160, 177, 0.18);
  --palette-grey-400-a22: rgba(154, 160, 177, 0.22);
  --palette-grey-400-a35: rgba(154, 160, 177, 0.35);
  --palette-grey-400-a45: rgba(154, 160, 177, 0.45);
  --palette-navy-950-a06: rgba(0, 6, 38, 0.06);
  --palette-navy-950-a12: rgba(0, 6, 38, 0.12);
  --palette-navy-950-a30: rgba(0, 6, 38, 0.3);
  --palette-navy-950-a92: rgba(0, 6, 38, 0.92);
  --palette-sky-300-a06: rgba(127, 209, 255, 0.055);
  --palette-sky-300-a20: rgba(127, 209, 255, 0.2);
  --palette-gold-400-a10: rgba(212, 168, 75, 0.1);
  --palette-navy-900-a88: rgba(5, 12, 48, 0.88);
  --palette-white-a85: rgba(255, 255, 255, 0.85);
  --palette-blue-600-a07: rgba(55, 79, 159, 0.07);
  --palette-blue-600-a14: rgba(55, 79, 159, 0.14);
  --palette-blue-600-a45: rgba(55, 79, 159, 0.45);

  /* Frosted glass over the horizon (glass panels; roles in section 2) */
  --palette-grey-300: #C3C9D6;                      /* muted text on dark glass */
  --palette-navy-900-a74: rgba(5, 12, 48, 0.74);    /* dark glass tint */
  --palette-navy-900-a92: rgba(5, 12, 48, 0.92);    /* dark glass, no blur */
  --palette-frost-a16: rgba(214, 226, 255, 0.16);   /* dark glass edge */
  --palette-white-a04: rgba(255, 255, 255, 0.04);
  --palette-white-a10: rgba(255, 255, 255, 0.1);
  --palette-white-a80: rgba(255, 255, 255, 0.8);    /* light glass tint */
  --palette-white-a94: rgba(255, 255, 255, 0.94);   /* light glass, no blur */
  --palette-white-a90: rgba(255, 255, 255, 0.9);
  --palette-blue-600-a20: rgba(55, 79, 159, 0.2);
  --palette-black-a55: rgba(0, 0, 0, 0.55);

  /* Hero scene (from variation B: aurora, planet-rim horizon, dawn glow).
     Raw values derived from the brand blues and gold above. */
  --scene-void: #02040F;
  --scene-sky-low: #0D1F5C;
  --scene-sky-mid: #060D33;
  --scene-aurora-1: rgba(55, 79, 159, 0.65);
  --scene-aurora-2: rgba(91, 116, 201, 0.45);
  --scene-aurora-3: rgba(127, 209, 255, 0.16);
  --scene-aurora-4: rgba(212, 168, 75, 0.12);
  --scene-ray: rgba(169, 188, 247, 0.06);
  --scene-ray-clear: rgba(169, 188, 247, 0);
  --scene-planet: #01030B;
  --scene-planet-edge: #050B26;
  --scene-planet-rim: #0B1747;
  --scene-rim-line: rgba(214, 226, 255, 0.85);
  --scene-rim-glow: rgba(91, 116, 201, 0.55);
  --scene-rim-haze: rgba(55, 79, 159, 0.4);
  --scene-sun-core: rgba(255, 255, 255, 0.95);
  --scene-sun-halo: rgba(190, 208, 255, 0.55);
  --scene-sun-wash: rgba(91, 116, 201, 0.35);
  --scene-vignette: rgba(0, 0, 0, 0.7);
  /* Gold dawn variant (EndPoint Zero page) */
  --scene-gold-aurora: rgba(212, 168, 75, 0.22);
  --scene-gold-rim-line: rgba(255, 232, 180, 0.9);
  --scene-gold-rim-glow: rgba(212, 168, 75, 0.45);
  --scene-gold-sun-core: rgba(255, 248, 230, 0.95);
  --scene-gold-sun-halo: rgba(240, 210, 140, 0.5);
  --scene-gold-sun-wash: rgba(212, 168, 75, 0.22);

  /* Pale dawn horizon for the light theme: light sky, a planet the colour of
     the page, a soft blue rim, low-contrast aurora (see section 3) */
  --dawn-void: #F3F6FD;
  --dawn-sky-low: #DCE5FA;
  --dawn-sky-mid: #EAEFFB;
  --dawn-aurora-1: rgba(55, 79, 159, 0.10);
  --dawn-aurora-2: rgba(91, 116, 201, 0.10);
  --dawn-aurora-3: rgba(127, 209, 255, 0.16);
  --dawn-aurora-4: rgba(212, 168, 75, 0.12);
  --dawn-ray: rgba(55, 79, 159, 0.035);
  --dawn-ray-clear: rgba(55, 79, 159, 0);
  --dawn-planet: #FAF9F7;
  --dawn-planet-edge: #F4F5F8;
  --dawn-planet-rim: #E4E9F6;
  --dawn-rim-line: rgba(55, 79, 159, 0.55);
  --dawn-rim-glow: rgba(91, 116, 201, 0.22);
  --dawn-rim-haze: rgba(127, 160, 255, 0.16);
  --dawn-sun-core: rgba(255, 255, 255, 1);
  --dawn-sun-halo: rgba(255, 238, 205, 0.7);
  --dawn-sun-wash: rgba(212, 168, 75, 0.12);
  --dawn-vignette: rgba(0, 6, 38, 0.05);
  --dawn-gold-aurora: rgba(212, 168, 75, 0.16);
  --dawn-gold-rim-line: rgba(122, 90, 18, 0.55);
  --dawn-gold-rim-glow: rgba(212, 168, 75, 0.28);
  --dawn-gold-sun-core: rgba(255, 255, 255, 1);
  --dawn-gold-sun-halo: rgba(240, 210, 140, 0.55);
  --dawn-gold-sun-wash: rgba(212, 168, 75, 0.18);

  /* Type and layout (not colours, but shared tokens) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 4rem;
}

/* 2. SEMANTIC ROLES: dark theme (default) ---------------------------------
   Also applied to .theme-dark, and to the hero under ?horizon=band, so that band
   stays dark in light theme. */
:root,
.theme-dark,
:root[data-horizon="band"] .hero {
  --bg: var(--palette-navy-950);
  --bg-raised: var(--palette-navy-850);   /* cards and diagram panels */
  --scrim: var(--palette-navy-950);        /* lightbox background (always dark, opaque) */
  --text: var(--palette-offwhite);        /* 18.7:1 on --bg */
  --muted: var(--palette-grey-400);       /* 7.6:1 on --bg */
  --data: var(--palette-sky-300);         /* data in motion, 11.8:1 */
  --governed: var(--palette-gold-400);    /* EPZ / governed, 9.0:1 */
  --on-governed: var(--palette-navy-950); /* text on a gold fill, 9.0:1 */
  --deny: var(--palette-red-300);         /* rejected packet, 8.7:1 */
  --accent: var(--palette-blue-600);      /* fills behind --on-accent only */
  --accent-strong: var(--palette-blue-700);
  --on-accent: var(--palette-offwhite);   /* 7.1:1 / 10.2:1 */
  --line: var(--palette-grey-400-a22);
  --line-strong: var(--palette-grey-400-a45);
  --grid: var(--palette-sky-300-a06);
  --glow: var(--palette-blue-600-a45);
  --halo: var(--palette-sky-300-a20);
  --focus: var(--palette-sky-300);
  --tile: var(--palette-navy-950);        /* partner logo tiles: navy in both themes */
  --tile-light: var(--palette-white);      /* badge behind logos drawn for a light ground */
  --placeholder-text: var(--palette-grey-400);
  --placeholder-line: var(--palette-grey-400);
  --placeholder-bg: var(--palette-gold-400-a10);
  --mask: var(--palette-black);           /* only the alpha of a mask matters */

  /* EPZ diagram roles (--graph-*).
     Shared with the EPZ product (ui-main colors.css aliases these names). Change
     values in step with ui-main. Contrast: --graph-text 18.9:1 and --graph-meta
     6.1:1 on --graph-card. --graph-card-stroke is 2.2:1 (decoration only: selection
     is shown by the 2.4px --graph-accent-bright stroke). Status and level colours
     are for dots only, never text (--graph-status-pending is 3.5:1 on the card).
     The site leaves --graph-canvas unused (the diagram sits on the page's scene).
     Classification levels differ ON PURPOSE: the public site shows only Unclassified /
     CUI / Notional sample data, so it has -lvl-u and -lvl-cui (and an unused -lvl-s);
     the product has -lvl-u/-c/-s/-ts for real markings. Don't add -c/-ts here or
     -cui there to "match". */
  --graph-canvas: var(--palette-epz-black);
  --graph-card: var(--palette-epz-card);
  --graph-card-stroke: var(--palette-epz-line);
  --graph-line: var(--palette-epz-line);
  --graph-text: var(--palette-white);
  --graph-meta: var(--palette-epz-meta);
  --graph-accent: var(--palette-epz-accent);
  --graph-accent-bright: var(--palette-epz-accent-bright);
  --graph-status-active: var(--palette-epz-active);
  --graph-status-interrupted: var(--palette-epz-interrupted);
  --graph-status-blocked: var(--palette-epz-blocked);
  --graph-status-pending: var(--palette-epz-pending);
  --graph-lvl-u: var(--palette-epz-lvl-u);
  --graph-lvl-cui: var(--palette-epz-lvl-cui);
  --graph-lvl-s: var(--palette-epz-lvl-s);
  --graph-dim-opacity: 0.3;   /* links, card strokes and dots off the traced lineage */
  /* Site-only: fill of the gold-edged EndPoint Zero panel around the data sets;
     nearly opaque, so the horizon glow never sits behind its labels */
  --graph-panel: var(--palette-navy-900-a88);

  /* Header and footer stay navy in both themes (the logo is white type) */
  --chrome-bg: var(--palette-navy-950-a92);
  --chrome-solid: var(--palette-navy-950);
  --chrome-text: var(--palette-offwhite);
  --chrome-muted: var(--palette-grey-400);
  --chrome-line: var(--palette-grey-400-a18);
  --chrome-line-mid: var(--palette-grey-400-a15);
  --chrome-line-strong: var(--palette-grey-400-a35);
  --chrome-highlight: var(--palette-sky-300);

  /* Glass: the panels that carry all text after the hero (.glass in site.css, section 13).
     The tint is strong enough that every text role still passes WCAG AA over the
     BRIGHTEST part of the scene (sun core, rim line), not just the dark sky:
     --text, --data and --glass-muted 4.5:1 or better, --governed 3:1 or better by
     calculation and 4.5:1 or better as measured on the built pages (worst-case pixels
     at every scroll position, dark, light and Karina). --glass-bg-solid replaces the tint where
     there is no blur (no backdrop-filter support, phones); --glass-opaque is used for
     prefers-reduced-transparency. */
  --glass-bg: var(--palette-navy-900-a74);
  --glass-bg-solid: var(--palette-navy-900-a92);
  --glass-opaque: var(--palette-navy-850);
  --glass-sheen: var(--palette-white-a04);      /* faint light across the top of a panel */
  --glass-border: var(--palette-frost-a16);
  --glass-highlight: var(--palette-white-a10);  /* 1px inner top edge */
  --glass-shadow: var(--palette-black-a55);
  --glass-muted: var(--palette-grey-300);       /* replaces --muted on glass */
  --glass-blur: 10px;                           /* capped for scroll cost (site.css, section 13) */
  color-scheme: dark;
}

/* 2. SEMANTIC ROLES: light theme. Used twice: explicit choice and OS preference. */
:root[data-theme="light"] {
  --bg: var(--palette-paper);
  --bg-raised: var(--palette-white);
  --text: var(--palette-navy-950);        /* 18.9:1 on --bg */
  --muted: var(--palette-grey-700);       /* 6.5:1 on --bg */
  --data: var(--palette-sky-800);         /* 5.6:1 on --bg */
  --governed: var(--palette-gold-800);    /* 6.1:1 on --bg */
  --on-governed: var(--palette-white);    /* 6.6:1 */
  --deny: var(--palette-red-700);
  --line: var(--palette-navy-950-a12);
  --line-strong: var(--palette-navy-950-a30);
  --grid: var(--palette-blue-600-a07);
  --glow: var(--palette-blue-600-a14);
  --focus: var(--palette-blue-600);
  --placeholder-text: var(--palette-grey-700);
  --placeholder-line: var(--palette-grey-700);
  --placeholder-bg: var(--palette-navy-950-a06);
  --graph-canvas: var(--palette-epz-canvas-light);
  --graph-card: var(--palette-white);
  --graph-card-stroke: var(--palette-epz-line-light);
  --graph-line: var(--palette-epz-line-light);
  --graph-text: var(--palette-epz-ink);              /* 11.9:1 on white */
  --graph-meta: var(--palette-epz-meta-light);       /* 5.1:1 on white */
  --graph-accent: var(--palette-epz-accent-light);
  --graph-accent-bright: var(--palette-epz-accent-bright-light);
  --graph-status-active: var(--palette-epz-active-light);
  --graph-status-interrupted: var(--palette-epz-interrupted-light);
  --graph-status-blocked: var(--palette-epz-blocked-light);
  --graph-status-pending: var(--palette-epz-pending);
  --graph-lvl-u: var(--palette-epz-lvl-u-light);
  --graph-lvl-cui: var(--palette-epz-lvl-cui-light);
  --graph-lvl-s: var(--palette-epz-lvl-s-light);
  --graph-panel: var(--palette-white-a85);
  --glass-bg: var(--palette-white-a80);
  --glass-bg-solid: var(--palette-white-a94);
  --glass-opaque: var(--palette-white);
  --glass-sheen: var(--palette-white-a90);
  --glass-border: var(--palette-blue-600-a20);
  --glass-highlight: var(--palette-white);
  --glass-shadow: var(--palette-navy-950-a12);
  --glass-muted: var(--palette-grey-700);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--palette-paper);
    --bg-raised: var(--palette-white);
    --text: var(--palette-navy-950);
    --muted: var(--palette-grey-700);
    --data: var(--palette-sky-800);
    --governed: var(--palette-gold-800);
    --on-governed: var(--palette-white);
    --deny: var(--palette-red-700);
    --line: var(--palette-navy-950-a12);
    --line-strong: var(--palette-navy-950-a30);
    --grid: var(--palette-blue-600-a07);
    --glow: var(--palette-blue-600-a14);
    --focus: var(--palette-blue-600);
    --placeholder-text: var(--palette-grey-700);
    --placeholder-line: var(--palette-grey-700);
    --placeholder-bg: var(--palette-navy-950-a06);
    --graph-canvas: var(--palette-epz-canvas-light);
    --graph-card: var(--palette-white);
    --graph-card-stroke: var(--palette-epz-line-light);
    --graph-line: var(--palette-epz-line-light);
    --graph-text: var(--palette-epz-ink);              /* 11.9:1 on white */
    --graph-meta: var(--palette-epz-meta-light);       /* 5.1:1 on white */
    --graph-accent: var(--palette-epz-accent-light);
    --graph-accent-bright: var(--palette-epz-accent-bright-light);
    --graph-status-active: var(--palette-epz-active-light);
    --graph-status-interrupted: var(--palette-epz-interrupted-light);
    --graph-status-blocked: var(--palette-epz-blocked-light);
    --graph-status-pending: var(--palette-epz-pending);
    --graph-lvl-u: var(--palette-epz-lvl-u-light);
    --graph-lvl-cui: var(--palette-epz-lvl-cui-light);
    --graph-lvl-s: var(--palette-epz-lvl-s-light);
    --graph-panel: var(--palette-white-a85);
    --glass-bg: var(--palette-white-a80);
    --glass-bg-solid: var(--palette-white-a94);
    --glass-opaque: var(--palette-white);
    --glass-sheen: var(--palette-white-a90);
    --glass-border: var(--palette-blue-600-a20);
    --glass-highlight: var(--palette-white);
    --glass-shadow: var(--palette-navy-950-a12);
    --glass-muted: var(--palette-grey-700);
    color-scheme: light;
  }
}

/* 3. LIGHT HORIZON ---------------------------------------------------------
   In light theme the backdrop scene (site.css, "Backdrop") switches to the pale
   dawn values above, and the hero takes the light roles (navy text, 4.5:1 or
   better on every part of the scene). ?horizon=band skips this, keeping the dark
   scene and a dark hero for comparison. */
:root[data-theme="light"]:not([data-horizon="band"]) {
  --scene-void: var(--dawn-void);
  --scene-sky-low: var(--dawn-sky-low);
  --scene-sky-mid: var(--dawn-sky-mid);
  --scene-aurora-1: var(--dawn-aurora-1);
  --scene-aurora-2: var(--dawn-aurora-2);
  --scene-aurora-3: var(--dawn-aurora-3);
  --scene-aurora-4: var(--dawn-aurora-4);
  --scene-ray: var(--dawn-ray);
  --scene-ray-clear: var(--dawn-ray-clear);
  --scene-planet: var(--dawn-planet);
  --scene-planet-edge: var(--dawn-planet-edge);
  --scene-planet-rim: var(--dawn-planet-rim);
  --scene-rim-line: var(--dawn-rim-line);
  --scene-rim-glow: var(--dawn-rim-glow);
  --scene-rim-haze: var(--dawn-rim-haze);
  --scene-sun-core: var(--dawn-sun-core);
  --scene-sun-halo: var(--dawn-sun-halo);
  --scene-sun-wash: var(--dawn-sun-wash);
  --scene-vignette: var(--dawn-vignette);
  --scene-gold-aurora: var(--dawn-gold-aurora);
  --scene-gold-rim-line: var(--dawn-gold-rim-line);
  --scene-gold-rim-glow: var(--dawn-gold-rim-glow);
  --scene-gold-sun-core: var(--dawn-gold-sun-core);
  --scene-gold-sun-halo: var(--dawn-gold-sun-halo);
  --scene-gold-sun-wash: var(--dawn-gold-sun-wash);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-horizon="band"]) {
    --scene-void: var(--dawn-void);
    --scene-sky-low: var(--dawn-sky-low);
    --scene-sky-mid: var(--dawn-sky-mid);
    --scene-aurora-1: var(--dawn-aurora-1);
    --scene-aurora-2: var(--dawn-aurora-2);
    --scene-aurora-3: var(--dawn-aurora-3);
    --scene-aurora-4: var(--dawn-aurora-4);
    --scene-ray: var(--dawn-ray);
    --scene-ray-clear: var(--dawn-ray-clear);
    --scene-planet: var(--dawn-planet);
    --scene-planet-edge: var(--dawn-planet-edge);
    --scene-planet-rim: var(--dawn-planet-rim);
    --scene-rim-line: var(--dawn-rim-line);
    --scene-rim-glow: var(--dawn-rim-glow);
    --scene-rim-haze: var(--dawn-rim-haze);
    --scene-sun-core: var(--dawn-sun-core);
    --scene-sun-halo: var(--dawn-sun-halo);
    --scene-sun-wash: var(--dawn-sun-wash);
    --scene-vignette: var(--dawn-vignette);
    --scene-gold-aurora: var(--dawn-gold-aurora);
    --scene-gold-rim-line: var(--dawn-gold-rim-line);
    --scene-gold-rim-glow: var(--dawn-gold-rim-glow);
    --scene-gold-sun-core: var(--dawn-gold-sun-core);
    --scene-gold-sun-halo: var(--dawn-gold-sun-halo);
    --scene-gold-sun-wash: var(--dawn-gold-sun-wash);
  }
}

/* 4. ALTERNATE PALETTE: "Karina" (review toggle ?palette=karina) ----------
   From Karina's Figma file "EPZ - New Design Ideas" (the EPZ product UI),
   read 2026-10-26. Her colours: black and cool greys (#191C20, #22272F),
   white and grey text (#BDBDBD, #9E9E9E, #616161), UI Blue #2E77D0, and the
   "Button Blue" gradient #79C0FF → #D2A8FF. Light theme uses her wireframe
   neutrals (#EDF0F7) and dark text (#090909). UI-kit defaults in that file
   (GitHub Primer greens and greys) are deliberately not used.
   Gold for "governed" is kept (Bob, 2026-10-26).
   Adjustments for contrast (WCAG AA): white on #2E77D0 is only 4.50:1, so
   button fills use #2A6CC0 (5.2:1) and darker; light-theme data text uses
   #2563B0 (6.0:1 on white). All values are overrides only: delete this
   section and the ?palette toggle to drop the alternate. */
:root[data-palette="karina"] {
  --karina-black: #000000;
  --karina-cool-gray: #191C20;
  --karina-light-cool-gray: #22272F;
  --karina-white: #FFFFFF;
  --karina-gray-75: #BDBDBD;
  --karina-gray-40: #616161;
  --karina-blue: #2E77D0;
  --karina-blue-fill: #2A6CC0;      /* white text 5.2:1 */
  --karina-blue-deep: #2563B0;      /* white text 6.0:1; data text on white 6.0:1 */
  --karina-sky: #79C0FF;            /* "Button Blue" gradient start */
  --karina-lilac: #D2A8FF;          /* "Button Blue" gradient end */
  --karina-wf-200: #EDF0F7;
  --karina-text-dark: #090909;
  --karina-white-a08: rgba(255, 255, 255, 0.08);
  --karina-white-a16: rgba(255, 255, 255, 0.16);
  --karina-white-a30: rgba(255, 255, 255, 0.3);
  --karina-blue-a35: rgba(46, 119, 208, 0.35);
  --karina-blue-a12: rgba(46, 119, 208, 0.12);
  --karina-sky-a06: rgba(121, 192, 255, 0.06);
  --karina-sky-a20: rgba(121, 192, 255, 0.2);
  --karina-black-a92: rgba(0, 0, 0, 0.92);
  --karina-black-a12: rgba(9, 9, 9, 0.12);
  --karina-black-a30: rgba(9, 9, 9, 0.3);
  --karina-cool-gray-a76: rgba(25, 28, 32, 0.76);   /* dark glass tint */
  --karina-cool-gray-a92: rgba(25, 28, 32, 0.92);   /* dark glass, no blur */
  --karina-gray-80: #CCCCCC;                        /* muted text on dark glass */
}

/* Dark theme (default) */
:root[data-palette="karina"],
:root[data-palette="karina"] .theme-dark,
:root[data-palette="karina"][data-horizon="band"] .hero {
  --bg: var(--karina-black);
  --bg-raised: var(--karina-light-cool-gray);
  --text: var(--karina-white);              /* 21:1 on --bg, 15:1 on --bg-raised */
  --muted: var(--karina-gray-75);           /* 11.2:1 on --bg, 8.0:1 on --bg-raised */
  --data: var(--karina-sky);                /* 10.8:1 on --bg, 7.7:1 on --bg-raised */
  --governed: var(--palette-gold-400);      /* kept: 9.5:1 on --bg, 6.8:1 on --bg-raised */
  --on-governed: var(--karina-black);       /* 9.5:1 */
  --accent: var(--karina-blue-fill);        /* fills behind --on-accent only: 5.2:1 */
  --accent-strong: var(--karina-blue-deep); /* 6.0:1 */
  --on-accent: var(--karina-white);
  --line: var(--karina-white-a08);
  --line-strong: var(--karina-white-a30);
  --grid: var(--karina-sky-a06);
  --glow: var(--karina-blue-a35);
  --halo: var(--karina-sky-a20);
  --focus: var(--karina-sky);
  --tile: var(--karina-black);
  --placeholder-text: var(--karina-gray-75);
  --placeholder-line: var(--karina-gray-75);
  --chrome-bg: var(--karina-black-a92);
  --chrome-solid: var(--karina-black);
  --chrome-text: var(--karina-white);
  --chrome-muted: var(--karina-gray-75);
  --chrome-line: var(--karina-blue);        /* her thin blue rule under the header */
  --chrome-highlight: var(--karina-sky);
  --graph-panel: rgba(25, 28, 32, 0.9);     /* her #191C20, for the EPZ panel in the diagram */
  --glass-bg: var(--karina-cool-gray-a76);
  --glass-bg-solid: var(--karina-cool-gray-a92);
  --glass-opaque: var(--karina-cool-gray);
  --glass-border: var(--karina-white-a16);
  --glass-highlight: var(--karina-white-a16);
  --glass-muted: var(--karina-gray-80);

  /* Horizon scene in her blacks, with a blue rim and a faint lilac aurora */
  --scene-void: var(--karina-black);
  --scene-sky-low: #0A1A33;
  --scene-sky-mid: #05080F;
  --scene-aurora-1: rgba(46, 119, 208, 0.55);
  --scene-aurora-2: rgba(121, 192, 255, 0.3);
  --scene-aurora-3: rgba(210, 168, 255, 0.16);
  --scene-planet: var(--karina-black);
  --scene-planet-edge: #07090D;
  --scene-planet-rim: #101826;
  --scene-rim-line: rgba(121, 192, 255, 0.85);
  --scene-rim-glow: rgba(46, 119, 208, 0.55);
  --scene-rim-haze: rgba(46, 119, 208, 0.35);
  --scene-sun-halo: rgba(190, 220, 255, 0.5);
  --scene-sun-wash: rgba(46, 119, 208, 0.3);
}

/* Light theme */
:root[data-palette="karina"][data-theme="light"] {
  --bg: var(--karina-white);
  --bg-raised: var(--karina-white);
  --text: var(--karina-text-dark);          /* 19.9:1 */
  --muted: var(--karina-gray-40);           /* 6.2:1 on white */
  --data: var(--karina-blue-deep);          /* 6.0:1 on white */
  --governed: var(--palette-gold-800);      /* kept: 6.4:1 / 5.6:1 */
  /* Re-set here because the dark block above has equal specificity and comes later than the base light theme */
  --on-governed: var(--karina-white);       /* 6.4:1 on gold-800 */
  --glow: var(--karina-blue-a12);
  --graph-panel: var(--palette-white-a85);
  --line: var(--karina-black-a12);
  --line-strong: var(--karina-black-a30);
  --grid: var(--karina-blue-a12);
  --focus: var(--karina-blue-deep);
  --placeholder-text: var(--karina-gray-40);
  --placeholder-line: var(--karina-gray-40);
  /* Glass: re-set (the dark Karina block above outranks the base light theme) */
  --glass-bg: var(--palette-white-a80);
  --glass-bg-solid: var(--palette-white-a94);
  --glass-opaque: var(--karina-white);
  --glass-sheen: var(--palette-white-a90);
  --glass-border: var(--karina-black-a12);
  --glass-highlight: var(--karina-white);
  --glass-shadow: var(--karina-black-a12);
  --glass-muted: var(--karina-gray-40);

  --dawn-void: #F7F9FC;
  --dawn-sky-low: #DCE8F8;
  --dawn-sky-mid: var(--karina-wf-200);
  --dawn-aurora-1: rgba(46, 119, 208, 0.1);
  --dawn-aurora-3: rgba(210, 168, 255, 0.14);
  --dawn-planet: var(--karina-white);
  --dawn-rim-line: rgba(46, 119, 208, 0.55);
}