/* css/tokens.css — Squelch dark palette + spacing/typography/effect tokens. Imported into the tokens layer by style.css. */

:root {
  /* Backgrounds */
  --bg-primary:        #0a0a0a;
  --bg-surface:        #1a1d22;
  --bg-surface-2:      #22262e;

  /* Text */
  --text-primary:      #f0ece4;
  --text-muted:        #a0a0a0;

  /* Accents */
  --accent-amber:      #e8a838;
  --accent-teal:       #3a8c8c;

  /* Clock color states */
  --clock-normal:      #ffffff;
  --clock-warning:     #f59e0b;
  --clock-alert:       #ef4444;
  --clock-positive:    #22c55e;

  /* State */
  --color-success:     #47c78a;
  --color-warning:     #f5b759;
  --color-error:       #ef5b5b;

  /* Effects */
  --glow-amber:        0 0 60px rgba(232, 168, 56, 0.15);
  --transition:        0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --radius:            12px;
  --radius-sm:         8px;
  --radius-xs:         6px;

  /* Typography */
  --font-mono:         'JetBrains Mono', 'Courier New', Courier, monospace;
  --font-body:         'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* HUD */
  --hud-height:        auto;
  --timetable-width:   480px;

  /* Stage theme — defined here so var(--border-subtle) resolves globally */
  --border-subtle:     #26262C;
}