/* ==========================================================================
   tokens.css
   Purpose:
   - Design tokens (CSS variables): colors, shadows, glass
   - Global base styles: body background, typography baseline
   - Keep this file stable; rarely change.
   Do NOT put:
   - Layout grids (dashboard, stage sizing)
   - Component styling (buttons, panels, tabs)
   ========================================================================== */

/* --- Design tokens --- */
:root{
  --bg:#0b0f15;
  --panel:#101722;
  --panel2:#0f1620;

  --line:rgba(151,166,178,.18);
  --muted:rgba(151,166,178,.85);
  --text:#e6edf3;

  --e: rgba(77,227,255,0.95);   /* CH1 */
  --p: rgba(255,210,77,0.92);   /* CH2 */
  --b: rgba(178,123,255,0.88);  /* CH3 */

  --shadow: 0 18px 55px rgba(0,0,0,.35);
  --shadow2: 0 10px 30px rgba(0,0,0,.25);

  --glass: rgba(12,18,26,.72);
  --glass2: rgba(16,23,34,.72);
}

/* --- Base / typography --- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1000px 780px at 15% 0%, rgba(77,227,255,.12), transparent 55%),
    radial-gradient(1000px 780px at 85% 0%, rgba(178,123,255,.12), transparent 55%),
    radial-gradient(1200px 900px at 50% 100%, rgba(255,210,77,.06), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}