/*
 * Console themes.
 *
 * Each mission names a theme and the whole console changes with it — not just
 * hue, but how the display behaves: the two cathode-ray themes keep phosphor
 * persistence and scanlines, the modern one is crisp and immediate. Theme
 * variables are consumed by hud.css for the chrome and by panel.css for the
 * hardware, and are mirrored in src/ui/themes.js for the canvas.
 *
 * EVERY colour in this game is declared in this file. panel.css and hud.css
 * name tokens and never literals, so a theme can be read in one place and a
 * fourth one could be added without touching the other two sheets.
 */

:root {
  color-scheme: dark;

  /* Defaults are the green phosphor set; [data-theme] blocks override. */
  --bg: #030a07;
  --bg-panel: #061410;
  --bg-raised: #082019;
  --grid: #0d3326;
  --edge: #14503a;
  --ink: #6cffb8;
  --ink-bright: #c7ffe4;
  --ink-dim: #2f8f68;
  --accent: #40ff9e;
  --hostile: #ff5b52;
  --friendly: #59c8ff;
  --unknown: #ffd447;
  --warn: #ffa53d;
  --good: #6cff8f;
  --shadow: 0 0 12px rgba(64, 255, 158, .18);
  --glow: 0 0 6px rgba(64, 255, 158, .55);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 2px;
  --scanline-alpha: .06;

  /* Painted steel, as issued. The hardware in panel.css is built from these. */
  --metal: #6e7568;
  --metal-hi: #878e7f;
  --metal-lo: #4c5248;
  --metal-edge: #2c3128;
  --engrave: #f0f4e8;
  --engrave-dim: #c3cbb6;
  --plate: #3a4034;
  --lamp-off: #40463a;
  --screw: #9aa290;
  /* The face of the tube, the well behind a meter, and the paper the log
     prints on: near-black, but each set is a different near-black. */
  --tube-face: #000000;
  --well: #12140f;
  --paper: #0d0f0c;

  /*
   * Hardware that is the same colour on every set, because it is the same
   * part. A launch cap is red and a lever is bare aluminium whatever phosphor
   * is in the tube, so these are declared once and not overridden below.
   */
  --lever-hi: #d9dcd4;
  --lever-mid: #8f958a;
  --lever-lo: #5d635a;
  --lamp-filament: #ffffff;
  --fire-cap: #8d2b22;
  --fire-cap-lo: #5e1b16;
  --fire-cap-edge: #2a0d0a;
  --fire-ink: #ffd9d2;
  --fire-ink-dim: #e8a79e;
  --accept-cap: #2f6a3a;
  --accept-cap-lo: #1d4526;
  --accept-cap-edge: #0f2415;
  --refuse-cap: #7a3a1e;
  --refuse-cap-lo: #4a2211;
  --refuse-cap-edge: #241007;
  /* Alarm light, as components so an animation can fade its alpha. */
  --alarm-rgb: 255, 64, 40;
  --fire-halo-rgb: 255, 80, 60;
  --flash-rgb: 255, 236, 200;

  /*
   * The five layers this interface has, named. Nothing else may invent one:
   * a screw sits over its panel, a sticky shootlist heading over the rows it
   * names, the tutorial card over the tube, the command net over everything
   * on the stage, and a full screen over the lot.
   */
  --z-screw: 2;
  --z-sticky: 4;
  --z-tutorial: 6;
  --z-command: 20;
  --z-screen: 50;
}


/* Everything the player is being shot at with gets the same alarm treatment,
   and the same red: --alarm-rgb, shared with the tube's edge breath. */
@keyframes alarm-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--hostile), 0 0 0 rgba(var(--alarm-rgb), 0); }
  50% { box-shadow: inset 0 0 0 1px var(--hostile), 0 0 26px rgba(var(--alarm-rgb), .55); }
}
/*
 * The console flickering as something lands. The dip used to sit at 92–96% of
 * a half-second animation — twenty milliseconds of it, 460 ms AFTER the hit
 * it was reacting to, which is neither visible nor connected to anything. It
 * now happens at the front, where the impact is, and lasts long enough to
 * register: light, dark, recover.
 */
@keyframes flicker {
  0% { opacity: 1; }
  6% { opacity: .28; }
  14% { opacity: .92; }
  22% { opacity: .45; }
  40%, 100% { opacity: 1; }
}
@keyframes blink { 50% { opacity: .25; } }

/*
 * One phosphor, four issues of hardware, four hours of the day.
 *
 * The glass is the same green everywhere. What tells a watch from the last one
 * is the chassis: each echelon's console is a different issue of equipment —
 * painted olive steel at the battalion, grey-green at the sector, the blue-grey
 * of a district command post, anodised grey at national command — and the
 * hour of the watch puts its light on that metal: nothing at night, a cold
 * blue-white at dawn, a flat daylight, a warm dusk. The phosphor tokens are
 * not touched by either. `data-echelon` and `data-hour` are stamped on <body>
 * when a watch starts (app.js) and cleared on the menu.
 */
body[data-echelon="battalion"] { --metal-base: #6e7568; --metal-hi-base: #878e7f; --metal-lo-base: #4c5248; --plate-base: #3a4034; --screw-base: #9aa290; }
body[data-echelon="sector"]    { --metal-base: #6b7573; --metal-hi-base: #858f8c; --metal-lo-base: #4a5352; --plate-base: #363f3e; --screw-base: #98a19f; }
body[data-echelon="region"]    { --metal-base: #5f6b78; --metal-hi-base: #78859a; --metal-lo-base: #414a55; --plate-base: #2f3741; --screw-base: #8d99a8; }
body[data-echelon="national"]  { --metal-base: #39414d; --metal-hi-base: #48515f; --metal-lo-base: #272e38; --plate-base: #232a34; --screw-base: #626d7d; }
body[data-hour="night"] { --hour-light: #0a0f1a; --hour-mix: 0%; }
body[data-hour="dawn"]  { --hour-light: #9fb4cc; --hour-mix: 16%; }
body[data-hour="day"]   { --hour-light: #e8e4d8; --hour-mix: 26%; }
body[data-hour="dusk"]  { --hour-light: #d08a5a; --hour-mix: 18%; }
@supports (color: color-mix(in srgb, red, blue)) {
  body[data-echelon] {
    --metal: color-mix(in srgb, var(--metal-base), var(--hour-light, #0a0f1a) var(--hour-mix, 0%));
    --metal-hi: color-mix(in srgb, var(--metal-hi-base), var(--hour-light, #0a0f1a) var(--hour-mix, 0%));
    --metal-lo: color-mix(in srgb, var(--metal-lo-base), var(--hour-light, #0a0f1a) var(--hour-mix, 0%));
    --plate: color-mix(in srgb, var(--plate-base), var(--hour-light, #0a0f1a) var(--hour-mix, 0%));
    --screw: color-mix(in srgb, var(--screw-base), var(--hour-light, #0a0f1a) var(--hour-mix, 0%));
  }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  body[data-echelon] { --metal: var(--metal-base); --metal-hi: var(--metal-hi-base); --metal-lo: var(--metal-lo-base); --plate: var(--plate-base); --screw: var(--screw-base); }
}