/* ============================================================
   KESSLER ORBITAL — shared brand tokens
   Source of truth: docs/kessler-orbital-brand.html (locked v0.1)
   Cassette-futurism / "used future". DUAL-STATE palette is the brand:
     GREEN PHOSPHOR on near-black = safe / hub / menus / idle (MU/TH/UR register)
     AMBER + RED + hazard chevrons = deployed / in-match / alert (Aliens register)
   ============================================================ */
:root{
  /* ground + panels */
  --bg:#080b08;        /* Void black — ground */
  --panel:#0c120d;
  --panel2:#0e160f;

  /* phosphor (safe register) */
  --fg:#36ff6a;        /* Phosphor green — safe / hub */
  --dim:#2c8a47;       /* Dim green — labels / rules */
  --label:#4fb56a;
  --mute:#7fae8c;

  /* hazard (deployed register) */
  --amber:#ffb000;     /* Hazard amber — deployed */
  --alert:#ff4a3d;     /* Alert red — combat / fault */

  /* hairlines */
  --hair:rgba(54,255,106,.16);
  --hair2:rgba(54,255,106,.08);

  --maxw:1080px;

  /* type — chunky bitmap/mono; web-safe stack, no paid font required */
  --mono:"Berkeley Mono","JetBrains Mono","DejaVu Sans Mono","Courier New",ui-monospace,monospace;
}

/* CRT base: phosphor text-glow + scanlines + vignette.
   Use .scan and .vig as fixed overlay divs (pointer-events:none). */
html,body{margin:0;padding:0;background:var(--bg)}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:14px; line-height:1.5;
  text-shadow:0 0 5px rgba(54,255,106,.26);
}
.scan{position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22)0,rgba(0,0,0,.22)1px,transparent 1px,transparent 3px)}
.vig{position:fixed; inset:0; pointer-events:none; z-index:49;
  background:radial-gradient(125% 90% at 50% 0%,transparent 52%,rgba(0,0,0,.6)100%)}

/* shared atoms */
.label{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim)}
.mute{color:var(--mute); text-shadow:none}
.amber{color:var(--amber)} .alert{color:var(--alert)}
.o{color:var(--amber); text-shadow:0 0 8px rgba(255,176,0,.4)}  /* the "O" in KESSLER ORBITAL */

@media (prefers-reduced-motion:reduce){ *{animation:none !important} }