/* ============================================
   CSS Variables — Design Tokens
   ============================================ */
:root {
  /* Background layers */
  --bg-primary: #0b0e11;
  --bg-secondary: #181a20;
  --bg-tertiary: #2b3139;
  --bg-hover: #363c45;
  --bg-elevated: #1e2329;
  --bg-surface: #121418;
  --bg-surface-hover: #1a1d23;

  /* Text layers */
  --text-primary: #eaecef;
  --text-secondary: #b7bdc6;
  --text-tertiary: #8a929d;
  --text-disabled: #5e6673;

  /* Borders */
  --border-color: #2b3139;
  --border-subtle: rgba(43, 49, 57, 0.5);

  /* Semantic colors */
  --green: #0ecb81;
  --green-hover: #47dba8;
  --green-bg: rgba(14, 203, 129, 0.08);
  --green-border: rgba(14, 203, 129, 0.25);
  --green-glow: rgba(14, 203, 129, 0.15);
  --red: #f6465d;
  --red-hover: #ff6b7a;
  --red-bg: rgba(246, 70, 93, 0.08);
  --red-border: rgba(246, 70, 93, 0.25);
  --red-glow: rgba(246, 70, 93, 0.15);
  --blue: #1e80ff;
  --blue-hover: #2990ff;
  --blue-bg: rgba(30, 128, 255, 0.08);
  --blue-border: rgba(30, 128, 255, 0.25);
  --yellow: #fcd535;
  --gold: #f0b90b;
  --gold-hover: #f8d12f;
  --gold-dim: rgba(240, 185, 11, 0.15);
  --gold-glow: rgba(240, 185, 11, 0.2);
  --orange: #f0b90b;
  --ai-accent: #5E6AD2;
  --ai-accent-dim: rgba(94, 106, 210, 0.15);

  /* Typography */
  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6);

  /* Glow effects */
  --green-glow: rgba(14, 203, 129, 0.15);
  --red-glow: rgba(246, 70, 93, 0.15);
  --gold-glow: rgba(240, 185, 11, 0.2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Layout */
  --nav-height: 52px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 100;
  --z-tooltip: 200;
}