/* ArmsRace design tokens. Every colour, font, radius and layer the interface uses lives here;
   index.html only says var(--name). Names match the design system (docs/DESIGN.md). A visual pass
   changes values in this file, not the screens. The arena colours live in src/scene.rs (Palette).
   Two themes: the :root values below are Dark (the original look); [data-theme="bright"], the
   default, overrides them (web.rs sets data-theme from Settings > Theme). */

:root {
  /* Grounds */
  --bg-void: #07080b;            /* page, menus */
  --bg-canvas: #0b0c10;          /* game canvas, minimap, editor */
  --bg-input: #11141c;           /* text inputs, filters, scenario text */
  --bg-panel: #12141c;           /* docked side panels (editor bar) */
  --bg-control: #1a1d26;         /* buttons, bar tracks */
  --bg-control-hover: #242938;
  --bg-selected: #2b3550;        /* a toggled option */
  --bg-chip-on: #27406b;         /* a toggled filter chip */
  --bg-row-hover: #1a2234;       /* list row under the pointer */
  --bg-row-equipped: #1d3358;    /* the equipped row in the catalog */
  --bg-primary: #20314f;         /* the one primary action */
  --bg-primary-hover: #2a406a;
  --bg-file: #1d2a46;            /* file pickers, dropdowns */
  --bg-hud: rgba(8, 10, 16, 0.72);        /* ammo block */
  --bg-hud-soft: rgba(8, 10, 16, 0.6);    /* HP block */
  --bg-feed: rgba(8, 10, 16, 0.7);        /* kill feed lines */
  --bg-board: rgba(8, 10, 16, 0.88);      /* scoreboard */
  --bg-glass: rgba(10, 12, 18, 0.88);     /* replay viewer panels */
  --bg-glass-strong: rgba(10, 12, 18, 0.92); /* dev panel, scrub bar */
  --bg-scrim: rgba(5, 6, 9, 0.72);        /* behind centered overlays */
  --scrim-glow: rgba(24, 30, 46, 0.93);   /* menu backdrop centre */
  --scrim-edge: rgba(4, 5, 8, 0.97);      /* menu backdrop edge */
  --scrim-glow-strong: rgba(24, 30, 46, 0.97); /* loadout/armory backdrop centre */
  --scrim-edge-strong: rgba(4, 5, 8, 0.99);
  --strat-fade-from: rgba(8, 10, 18, 0.92); /* stratagem menu, left edge */
  --strat-fade-to: rgba(8, 10, 18, 0.7);
  --vignette: rgba(10, 10, 20, 0.75);     /* suppression vignette edge */

  /* Lines */
  --line-control: #3a4152;       /* buttons, panels, minimap */
  --line-track: #2a2f3c;         /* bars, list dividers */
  --line-input: #2c3345;
  --line-subtle: #2a3144;        /* lists, checklists, stratagem rows, editor divider */
  --line-list-row: #1b2130;      /* between catalog rows */
  --line-file: #4a6aa8;
  --line-chip-on: #4a78c0;
  --line-selected: var(--team-me);
  --line-mark-kill: #7a2a2a;

  /* Text */
  --ink: #d8dce6;
  --ink-white: #ffffff;
  --ink-bright: #e9edf7;         /* wordmark, titles, code arrows, weapon name */
  --ink-cool: #dbe6ff;           /* text on file/dropdown fills, stratagem names */
  --ink-soft: #c9d1e3;           /* secondary values, input text */
  --ink-pale: #aab3c5;           /* list labels, checklist titles, map text */
  --ink-muted: #9aa3b5;
  --ink-dim: #8993a8;            /* tagline, stat labels, table heads, stratagem counts */
  --ink-cool-dim: #8fa0c0;       /* catalog row notes, dev panel hint */
  --ink-faint: #6c7488;          /* section labels on bg-void only (4.3:1) */
  --shadow-ink: #000000;         /* text shadows over the arena */
  --ink-on-primary: var(--ink);  /* text on the primary button */
  --shadow-panel: none;          /* floating panels (bright: a soft drop shadow) */

  /* Teams and results */
  --team-me: #4ea1ff;
  --team-me-soft: #7fc4ff;       /* your row on the scoreboard */
  --team-foe: #ff5d5d;
  --result-win: #6fe08a;
  --result-loss: var(--team-foe);
  --result-draw: var(--ink-pale);

  /* Signals: one meaning each */
  --signal-highlight: #e0b04a;
  --signal-strat: #ffd166;
  --signal-grenade: #ffd27a;
  --signal-warn: #ffb36b;
  --signal-warn-soft: #ffb25a;   /* replay warnings */
  --signal-error: #ff8a6a;       /* rules check, refused imports */
  --signal-ok: #7fe3a0;
  --signal-drone: #7ad7ff;
  --signal-shield: #58d6e8;
  --signal-dash: #8fe3a2;
  --signal-secondary: #9fb4d8;
  --signal-dev: #ffcf5a;
  --delta-up: var(--result-win);  /* comparison: better */
  --delta-down: #ff8a7a;          /* comparison: worse */
  --mark-kill: #ff8a8a;
  --mark-blast: #ffc27a;

  /* The Cheater owns magenta */
  --cheat: #ff6bd5;
  --cheat-ink: #ffd0f3;
  --cheat-fill: #4a1840;
  --cheat-line: #8a2a74;

  /* Effects */
  --hyper-cyan: #7ef0ff;
  --hyper-glow-cyan: #2fd0ff;
  --hyper-glow-pink: #ff4fd8;
  --killcam-fill: rgba(120, 20, 20, 0.75);
  --killcam-line: #ff6a6a;
  --fx-flashbang: #ffffff;

  /* Eras. --era-accent marks the era itself (the era card, the Arms Race strip), never a state;
     outside a Forge match it is your blue. */
  --era-primitive: #d98f3e;      /* ochre */
  --era-medieval: #d8c08a;       /* parchment gold */
  --era-gunpowder: #c9a14a;      /* brass */
  --era-industrial: #b8c4cc;     /* steel */
  --era-modern: #4ea1ff;         /* polymer blue */
  --era-future: #5ff0ff;         /* glow cyan */
  --era-accent: var(--team-me);

  /* Type. --font-display is the hook for the one display face (wordmark, titles, big numbers);
     until it is chosen it is the same monospace as everything else. */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-ui: var(--font-mono);
  --font-display: var(--font-mono);
  --font-code: monospace;        /* raw text boxes (map text, scenarios) */

  /* Shape */
  --radius-none: 0;
  --radius-panel: 6px;           /* only panels floating over the arena */

  /* Spacing steps the screens use (adopt as screens are touched) */
  --space-3: 3px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px;
  --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-36: 36px; --space-56: 56px;

  /* Layers */
  --z-hud: 3;
  --z-suppressed: 4;
  --z-flash: 5;
  --z-feed: 5;
  --z-stratmenu: 6;
  --z-board: 6;
  --z-editor: 7;
  --z-eracard: 8;
}

/* Era themes. During a Forge match the root carries data-era="<era>" (web.rs). Each block will
   override the tokens above to reskin the interface for its era; for now only the accent is set
   (the full palettes are proposals in the design system). Team, result and signal colours keep
   their meaning in every era. */
:root[data-era="primitive"] { --era-accent: var(--era-primitive); }
:root[data-era="medieval"] { --era-accent: var(--era-medieval); }
:root[data-era="gunpowder"] { --era-accent: var(--era-gunpowder); }
:root[data-era="industrial"] { --era-accent: var(--era-industrial); }
:root[data-era="modern"] { --era-accent: var(--era-modern); }
:root[data-era="future"] { --era-accent: var(--era-future); }

/* Bright theme (the default; D104): warm off-white grounds, white panels with soft shadows, ink
   #1d2230, team colours tuned for light ground. Every text pair is 4.5:1 or better and every mark
   3:1 or better, in every era. */
:root[data-theme="bright"] {
  --bg-void: #f4f1ea;
  --bg-canvas: #ebe6da;
  --bg-input: #ffffff;
  --bg-panel: #ffffff;
  --bg-control: #ffffff;
  --bg-control-hover: #eef3fb;
  --bg-selected: #dce9ff;
  --bg-chip-on: #d6e5ff;
  --bg-row-hover: #eef3fb;
  --bg-row-equipped: #dce9ff;
  --bg-primary: #1d6fe8;
  --bg-primary-hover: #155fd0;
  --bg-file: #e6eefc;
  --bg-hud: rgba(255,255,255,.88);
  --bg-hud-soft: rgba(255,255,255,.78);
  --bg-feed: rgba(255,255,255,.88);
  --bg-board: rgba(255,255,255,.95);
  --bg-glass: rgba(255,255,255,.9);
  --bg-glass-strong: rgba(255,255,255,.95);
  --bg-scrim: rgba(244,241,234,.55);
  --scrim-glow: rgba(255,255,255,.94);
  --scrim-edge: rgba(232,228,218,.97);
  --scrim-glow-strong: rgba(255,255,255,.97);
  --scrim-edge-strong: rgba(232,228,218,.99);
  --strat-fade-from: rgba(255,255,255,.95);
  --strat-fade-to: rgba(255,255,255,.8);
  --vignette: rgba(90,70,40,.16);
  --line-control: #cdd2dc;
  --line-track: #dde1e8;
  --line-input: #c3c9d5;
  --line-subtle: #e4e7ee;
  --line-list-row: #eef0f4;
  --line-file: #8fb0e8;
  --line-chip-on: #5b95f0;
  --line-mark-kill: #f0a0a0;
  --ink: #1d2230;
  --ink-white: #0b0f1a;
  --ink-bright: #11151f;
  --ink-cool: #1d3a70;
  --ink-soft: #394156;
  --ink-pale: #4f596e;
  --ink-muted: #555e72;
  --ink-dim: #5f687c;
  --ink-cool-dim: #4f6590;
  --ink-faint: #5f677a;
  --ink-on-primary: #ffffff;
  --shadow-ink: rgba(255,255,255,.75);
  --team-me: #1760d6;
  --team-me-soft: #5b9cf5;
  --team-foe: #c8202f;
  --result-win: #16884a;
  --result-draw: var(--ink-pale);
  --signal-highlight: #b97c00;
  --signal-strat: #975800;
  --signal-grenade: #a86400;
  --signal-warn: #c2410c;
  --signal-warn-soft: #dd6b20;
  --signal-error: #c9301f;
  --signal-ok: #11733a;
  --signal-drone: #086d98;
  --signal-shield: #08727f;
  --signal-dash: #15803d;
  --signal-secondary: #3a5a9a;
  --signal-dev: #a06d00;
  --delta-down: #c9302c;
  --mark-kill: #c8202f;
  --mark-blast: #e07a1a;
  --cheat: #c41d93;
  --cheat-ink: #6e0d52;
  --cheat-fill: #fde4f6;
  --cheat-line: #e58acb;
  --killcam-fill: rgba(224,48,63,.14);
  --killcam-line: #e0303f;
  --shadow-panel: 0 2px 10px rgba(40, 40, 60, 0.10), 0 1px 2px rgba(40, 40, 60, 0.08);
  --era-primitive: #a0520f;
  --era-medieval: #8a2b30;
  --era-gunpowder: #835a0b;
  --era-industrial: #4c5f6c;
  --era-modern: #1760d6;
  --era-future: #07717f;
}
/* Bright, per era: the grounds, the primary button and the selection take the era's colours (the
   arena's floor and walls follow in scene::Palette::bright). */
:root[data-theme="bright"][data-era="primitive"] { --bg-void: #f7efe2; --bg-canvas: #efe3cf; --bg-primary: #a0520f; --bg-primary-hover: #88450b; --line-selected: #a0520f; }
:root[data-theme="bright"][data-era="medieval"] { --bg-void: #f3f1ec; --bg-canvas: #e9e6de; --bg-primary: #8a2b30; --bg-primary-hover: #742227; --line-selected: #8a2b30; }
:root[data-theme="bright"][data-era="gunpowder"] { --bg-void: #f6f0e4; --bg-canvas: #ede3d0; --bg-primary: #2f4a8a; --bg-primary-hover: #263d74; --line-selected: #2f4a8a; }
:root[data-theme="bright"][data-era="industrial"] { --bg-void: #f1f2f3; --bg-canvas: #e4e6e8; --bg-primary: #3d5463; --bg-primary-hover: #324553; --line-selected: #3d5463; }
:root[data-theme="bright"][data-era="future"] { --bg-void: #eef7fa; --bg-canvas: #dff0f5; --bg-primary: #07717f; --bg-primary-hover: #065f6b; --line-selected: #07717f; --hyper-cyan: #0aa5c0; }