/* ── TOKENS ──
   Every colour, size and typeface. Change brand colours here and nowhere else.

   Square corners throughout, one accent used only for things that are live
   or clickable. If something is red on this site, it does something.
*/

:root {
  /* Surfaces — near-black, stepped so panels read as layers not boxes */
  --void:    #0A0A0B;
  --panel:   #121214;
  --panel-2: #17171A;
  --panel-3: #1E1E22;
  --field:   #1A1A1D;

  /* Lines */
  --line:    rgba(255,255,255,0.07);
  --line-hi: rgba(255,255,255,0.15);
  --line-lo: rgba(255,255,255,0.04);

  /* Text */
  --text:  #ECECEE;
  --muted: #9A9AA2;
  --dim:   #64646D;

  /* Accent */
  --accent:      #CC322A;
  --accent-hi:   #E24238;
  --accent-dim:  rgba(204,50,42,0.13);
  --accent-line: rgba(204,50,42,0.34);

  /* Status */
  --live: #35C07A;
  --hold: #D9A227;

  --discord: #5865F2;

  /* Radii — Wave-style soft corners rather than hard edges */
  --r-sm:   7px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* Depth — a glow under the primary action and a lift on floating panels */
  --glow: 0 8px 30px -10px rgba(204,50,42,0.55);
  --lift: 0 20px 50px -24px rgba(0,0,0,0.9);

  /* Type */
  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Measure */
  --gut: 30px;
  --max: 1220px;
  --bar: 60px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 900px) { :root { --gut: 18px; } }