:root {
  /* Colors */
  --color-bg: #121520;
  --color-surface: #202636;
  --color-elevated: #343d4c;
  --color-border: #485565;
  --color-primary: #06b6d4;
  --color-primary-hover: #22d3ee;
  --color-secondary: #8b5cf6;
  --color-text: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-success: #22c55e;
  --color-danger: #dc5046;
  --color-warning: #f59e0b;

  /* Chess Board Colors */
  --board-light: #cbd5e1;
  --board-dark: #5c6b7a;
  --board-highlight: rgba(6, 182, 212, 0.45);
  --board-move-indicator: rgba(34, 197, 94, 0.55);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 12px rgba(6, 182, 212, 0.3);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}