/* ====================================================================
   WCPE INSTRUCTOR STUDIO — DESIGN TOKENS
   ====================================================================
   Cascade layer 1 of 7. Owns region 1 — the design tokens (the Electric
   Studio palette, the three radius families, glow, layout constants).

   LOAD ORDER IS LOAD-BEARING:
     tokens -> base -> shell -> stage -> panels -> producer -> responsive
   This file is #1. Nothing here may depend on a rule that loads later.
   The numbered region banners below are this file's own. The numbering is one
   flat sequence 1-22 shared across the seven cascade files and no two files
   repeat a number; it was inherited from the concept-6 "Studio Rail" mockup the
   cascade was first extracted from. That mockup is deleted and these banners
   are the source now. Region map: docs/CODEBASE.html#style-css-regions
   ==================================================================== */
/* ====================================================================
   1 · DESIGN TOKENS — the Electric Studio system
   Every visual value in this file traces here. The --es-* palette is
   Tor-approved (docs/CODEBASE.html#style-palette): change CODEBASE.html
   first, then this block — never improvise a new color. The unprefixed
   aliases (--void, --cyan, ...) are historical shorthands used
   throughout; keep them pointed at their --es-* parents. Three
   asymmetric radius families + circles are the ONLY radii allowed
   anywhere (docs/CODEBASE.html#style-radii — enforcement is
   contractual). --glow / --azure-glow are the hover/focus language
   (docs/CODEBASE.html#style-glow). --rail-w / --top-h / --transport-h
   are the three layout constants each responsive mode retunes (see the
   mode banners near the end of this stylesheet).
   ==================================================================== */
:root{
  --es-void:#05080f;
  --es-surface:#0b1322;
  --es-raised:#0f1b30;
  --es-navy:#083361;
  --es-blue:#074c8e;
  --es-steel:#417593;
  --es-azure:#2f9be0;
  --es-cyan:#22d3ee;
  --es-red:#ff3b6b;
  --es-text:#e7eef7;
  --es-dim:#b9c8db;
  --es-hairline:rgba(65,117,147,.44);
  --void:var(--es-void);
  --surface:var(--es-surface);
  --raised:var(--es-raised);
  --navy:var(--es-navy);
  --blue:var(--es-blue);
  --steel:var(--es-steel);
  --azure:var(--es-azure);
  --cyan:var(--es-cyan);
  --red:var(--es-red);
  --text:var(--es-text);
  --dim:var(--es-dim);
  --good:var(--es-cyan);
  --line:var(--es-hairline);
  --shadow:0 18px 60px rgba(0,0,0,.38);
  --glow:0 0 0 1px var(--cyan),0 0 18px -6px var(--cyan);
  --azure-glow:0 0 18px -6px var(--azure);
  --major-radius:22px 7px 22px 7px;
  --card-radius:14px 5px 14px 5px;
  --control-radius:10px 4px 10px 4px;
  --rail-w:72px;
  --top-h:64px;
  --transport-h:68px;
}