/*
 * Grid Void — CSS custom properties.
 *
 * Mirrors `colors.ts` 1:1. Tailwind classes resolve through these vars
 * (e.g. `bg-wr-bg-primary` → `var(--bg-primary)`), so swapping these
 * values at `:root` swaps the entire theme at runtime.
 *
 * Three declaration patterns coexist:
 *
 *   1. Solid color tokens — declared TWICE:
 *        --foo:     #rrggbb       (hex — for direct CSS use, inline styles)
 *        --foo-rgb: r g b         (space-separated triplet — for Tailwind's
 *                                  `<alpha-value>` placeholder)
 *
 *   2. Translucent tokens — declared ONCE:
 *        --foo:     rgba(r, g, b, a)
 *      Alpha is baked in; Tailwind opacity modifiers are not available
 *      for these.
 *
 *   3. Glow tokens — declared ONCE as a multi-value CSS box-shadow string:
 *        --foo-glow: 0 0 12px rgba(r, g, b, a), 0 0 1px rgba(r, g, b, a);
 *      Used in `box-shadow` rules. Only the cyan + orange (primary +
 *      MCP-opposition) accents ship glows in this family.
 *
 * Aliasing: the source CSS aliases `--amber*` to cyan and `--red*` to
 * orange. We preserve the same aliasing here by duplicating the values
 * literally rather than chaining `var()` references — keeps the
 * contract test (which parses literal values) honest.
 *
 * The contract test in `src/__tests__/themes/the-grid.test.ts`
 * enforces parity with `colors.ts`.
 */
:root {
  /* ===== Backward-compat solid tokens ===== */
  --background: #02040a;
  --background-rgb: 2 4 10;
  --foreground: #d8eef8;
  --foreground-rgb: 216 238 248;

  --bg-primary: #02040a;
  --bg-primary-rgb: 2 4 10;
  --bg-secondary: #01030a;
  --bg-secondary-rgb: 1 3 10;
  --bg-card: #050a13;
  --bg-card-rgb: 5 10 19;

  --border-default: #021f2a;
  --border-default-rgb: 2 31 42;
  --border-active: #00d4ff;
  --border-active-rgb: 0 212 255;

  --accent-primary: #00d4ff;
  --accent-primary-rgb: 0 212 255;
  --accent-secondary: #ff6b1a;
  --accent-secondary-rgb: 255 107 26;
  --accent-warning: #00d4ff;
  --accent-warning-rgb: 0 212 255;
  --accent-success: #5be5a5;
  --accent-success-rgb: 91 229 165;
  --accent-exercise: #00d4ff;
  --accent-exercise-rgb: 0 212 255;

  --text-primary: #d8eef8;
  --text-primary-rgb: 216 238 248;
  --text-secondary: #8aa6b8;
  --text-secondary-rgb: 138 166 184;
  --text-muted: #547080;
  --text-muted-rgb: 84 112 128;

  /* ===== Expanded text tones (solid) ===== */
  --text-bright: #ffffff;
  --text-bright-rgb: 255 255 255;
  --text-mid: #8aa6b8;
  --text-mid-rgb: 138 166 184;
  --text-sub: #547080;
  --text-sub-rgb: 84 112 128;
  --text-dim: #2a3c48;
  --text-dim-rgb: 42 60 72;

  /* ===== Surfaces (mostly translucent) ===== */
  --surface-bg: #02040a;
  --surface-bg-rgb: 2 4 10;
  --surface-bar: rgba(2, 4, 10, 0.92);
  --surface-bar-dim: rgba(2, 4, 10, 0.78);
  --surface-panel: rgba(6, 12, 22, 0.72);
  --surface-row: rgba(4, 9, 17, 0.6);
  --surface-input-bg: rgba(0, 0, 0, 0.65);
  --surface-black-shade: rgba(0, 212, 255, 0.05);

  /* ===== Lines ===== */
  --line-faint: rgba(0, 212, 255, 0.06);
  --line-default: #021f2a;
  --line-default-rgb: 2 31 42;
  --line-strong: rgba(0, 212, 255, 0.55);
  /* Topology connection edge stroke — --line-faint (0.06 cyan on near-black) is invisible. */
  --wr-edge-standard-stroke: rgba(0, 212, 255, 0.4);

  /* ===== Per-color accents ===== */

  /* Cyan — primary accent. Full variant set + glow. */
  --accent-cyan: #00d4ff;
  --accent-cyan-rgb: 0 212 255;
  --accent-cyan-soft: rgba(0, 212, 255, 0.10);
  --accent-cyan-soft-2: rgba(0, 212, 255, 0.20);
  --accent-cyan-line: rgba(0, 212, 255, 0.50);
  --accent-cyan-on: #001016;
  --accent-cyan-on-rgb: 0 16 22;
  --accent-cyan-glow: 0 0 12px rgba(0, 212, 255, 0.55), 0 0 1px rgba(0, 212, 255, 0.9);

  /* Amber — aliased to cyan (matches source `--amber: var(--cyan)`). */
  --accent-amber: #00d4ff;
  --accent-amber-rgb: 0 212 255;
  --accent-amber-soft: rgba(0, 212, 255, 0.10);
  --accent-amber-soft-2: rgba(0, 212, 255, 0.20);
  --accent-amber-line: rgba(0, 212, 255, 0.50);
  --accent-amber-on: #001016;
  --accent-amber-on-rgb: 0 16 22;

  /* Orange — MCP opposition. Full variant set + glow. */
  --accent-orange: #ff6b1a;
  --accent-orange-rgb: 255 107 26;
  --accent-orange-soft: rgba(255, 107, 26, 0.10);
  --accent-orange-line: rgba(255, 107, 26, 0.50);
  --accent-orange-glow: 0 0 10px rgba(255, 107, 26, 0.5);

  /* Red — aliased to orange (matches source `--red: var(--orange)`). */
  --accent-red: #ff6b1a;
  --accent-red-rgb: 255 107 26;
  --accent-red-soft: rgba(255, 107, 26, 0.10);
  --accent-red-line: rgba(255, 107, 26, 0.50);

  --accent-green: #5be5a5;
  --accent-green-rgb: 91 229 165;
  --accent-green-soft: rgba(91, 229, 165, 0.10);
  --accent-green-line: rgba(91, 229, 165, 0.42);

  /* Base-only accents (no soft/line variants in the source). */
  --accent-violet: #c790ff;
  --accent-violet-rgb: 199 144 255;
  --accent-blue: #5b9eff;
  --accent-blue-rgb: 91 158 255;
  --accent-pink: #ff7ab8;
  --accent-pink-rgb: 255 122 184;

  /* ===== Warroom layout rhythm (Phase B-A, #1261) =====
     Non-color tokens that drive the warroom shell + rail panel spacing.
     This theme keeps the pre-#1261 visual rhythm; situation-room is the
     only theme that takes the mock's tighter values. Not parsed by the
     colors.ts ↔ tokens.css contract walker (non-hex / non-rgba). */
  --wr-rail-left-width: 300px;
  --wr-rail-right-width: 380px;
  --wr-rail-gap: 16px;
  --wr-shell-padding-x: 16px;
  --wr-shell-padding-y: 16px;
  --wr-panel-padding-x: 12px;
  --wr-panel-padding-y: 8px;
  --wr-panel-head-padding-y: 8px;

  /* Section rhythm (#1283) — preserves the pre-#1283 visual rhythm
     (8/16-px section gaps, no main inset). situation-room overrides
     for the mock's flush-stacked strip composition. */
  --wr-section-gap-y: 8px;
  --wr-footer-gap-y: 16px;
  --wr-main-padding-x: 0;
  --wr-main-padding-y: 0;

  /* ===== Warroom panel radius + corner brackets (Phase B-B, #1262) =====
     Default: rounded corners, no brackets (opacity 0 hides them).
     situation-room overrides for hard corners + visible L-brackets. */
  --wr-panel-radius: 8px;
  --wr-panel-bracket-color: var(--text-mid);
  --wr-panel-bracket-opacity: 0;
  --wr-panel-bracket-size: 10px;


  /* ===== Warroom background atmosphere (Phase B-C, #1263) =====
     Opt-out: every gradient resolves to nothing so .wr-bg-layer
     renders no spotlight, no parchment, no graph-paper grid — same
     visual as before this token set existed. */
  --wr-bg-spotlight-left: none;
  --wr-bg-spotlight-right: none;
  --wr-bg-base: none;
  --wr-bg-grid-line: transparent;
  --wr-bg-grid-size: 0;
  --wr-bg-grid-mask: none;

  /* ===== Warroom mock-parity Phase B-D tokens (#1286) =====
     situation-room takes the mock values; other themes preserve
     their pre-#1286 visual rhythm. */
  --wr-rail-stack-gap-y: 8px;
  --wr-timeline-bg: var(--bg-secondary);
  --wr-timeline-future-overlay: rgba(0, 0, 0, 0.28);
  --wr-timeline-now-line: rgba(255, 255, 255, 0.25);
  /* Asset log flex constraint (#1286 #4 bucket). Preserves the
     pre-#1286 definite 220px basis from #1237; situation-room ships
     `0 1 auto` to size to content per its mock. */
  --wr-asset-log-flex: 0 0 220px;
  /* Role badge chrome (#1286 #10 bucket). Preserves pre-#1286
     `border-wr-accent-primary/30 bg-wr-accent-primary/10`;
     situation-room ships 40%/8% per its mock. */
  --wr-role-badge-border: rgb(var(--accent-primary-rgb) / 0.3);
  --wr-role-badge-bg:     rgb(var(--accent-primary-rgb) / 0.1);

  /* Topbar background + accent strip (#1286 TB-1 bucket). Preserves the
     pre-#1286 literal Tailwind gradients baked into live-state-bar.tsx
     (parchment cream wash + burgundy accent rail). situation-room
     overrides with its mock's cool-blue rail tone. */
  --wr-topbar-bg: linear-gradient(180deg, rgba(236, 225, 189, 0.45), rgba(236, 225, 189, 0.18) 40%, transparent 100%);
  --wr-topbar-accent-strip: linear-gradient(90deg, #b8442e 0%, rgba(184, 68, 46, 0.65) 35%, rgba(184, 68, 46, 0.3) 70%, transparent 100%);

  /* Mission timer color (#1286 TB-2 bucket). Preserves the pre-#1286
     `text-wr-accent-primary` treatment baked into mission-timer.tsx;
     situation-room overrides with `var(--text-primary)` per its mock. */
  --wr-mission-timer-color: var(--accent-primary);

  /* ===== Font families (#1286 commit 2) =====
     Theme-aware font stacks. tailwind.config.ts resolves
     font-sans/font-mono/font-display through these vars so swapping
     themes also swaps rendered families. Mirrors the fonts
     declaration in this theme's index.ts. */
  --wr-font-sans:    "IBM Plex Sans", system-ui, sans-serif;
  --wr-font-mono:    "IBM Plex Mono", "JetBrains Mono", monospace;
  --wr-font-display: Iceland, Eurostile, Bahnschrift, sans-serif;
  --wr-font-body:    "IBM Plex Sans", system-ui, sans-serif;

  /* ===== Body font-size baseline (#1286 Bucket A) =====
     Browser default (16px) — themes other than situation-room don't
     have a mock-defined density, so they keep the pre-#1286 baseline. */
  --wr-font-size-base: 16px;
}