/* ============================================================================
   Design Tokens — BEAM Design System
   All CSS custom properties. Variables only — no selectors, no visual impact.
   ============================================================================ */

:root {
  /* -- Colors ------------------------------------------------- */
  --color-bg: #1E1E1E;
  --color-surface: #141414;
  --color-surface-raised: #252525;
  --color-border: #333;
  --color-text: #e0e0e0;
  --color-muted: #888;
  --color-accent: #4a9eff;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-purple: #a78bfa;
  --color-orange: #fb923c;
  --color-cyan: #8be9fd;
  --color-hover: rgba(255, 255, 255, 0.03);

  /* -- Typography (5 tiers) ----------------------------------- */
  --text-xs: 0.7rem;
  --text-sm: 0.8rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Monaco', monospace;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* -- Spacing (5 tiers) -------------------------------------- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;

  /* -- Z-index (named layers) --------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-visor: 500;

  /* -- Radius (3 tiers) --------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* -- Transitions -------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;

  /* -- Component sizing --------------------------------------- */
  --input-height-sm: 28px;
  --input-height-md: 36px;
  --input-height-lg: 44px;
  --nav-width: 250px;
  --nav-width-collapsed: 48px;
}

/* ── Theme: Light ────────────────────────────────────────────── */

[data-theme="light"] {
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-surface-raised: #f0f0f0;
  --color-border: #d4d4d4;
  --color-text: #1a1a1a;
  --color-muted: #666;
  --color-accent: #2563eb;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-purple: #7c3aed;
  --color-orange: #ea580c;
  --color-cyan: #0891b2;
  --color-hover: rgba(0, 0, 0, 0.03);
}

/* ── Theme: High Contrast ────────────────────────────────────── */

[data-theme="high-contrast"] {
  --color-bg: #000000;
  --color-surface: #0a0a0a;
  --color-surface-raised: #1a1a1a;
  --color-border: #555;
  --color-text: #ffffff;
  --color-muted: #aaa;
  --color-accent: #5cb3ff;
  --color-success: #5eff8a;
  --color-warning: #ffcc33;
  --color-danger: #ff5555;
  --color-purple: #c4a8ff;
  --color-orange: #ff9f43;
  --color-cyan: #a0f0ff;
  --color-hover: rgba(255, 255, 255, 0.06);
}