/* Design tokens & variables for Roulette */
:root {
  /* Core theme colors */
  --felt-green: #0a5f20;
  --gold: #d4af37;
  --red: #dc143c;
  --black: #222;
  --white: #fff;

  /* Roulette specific colors */
  --roulette-red: #dc143c;
  --roulette-black: #000;
  --roulette-green: #00aa00;
  --roulette-gold: #ffd700;

  /* Outcomes */
  --win: #4CAF50;
  --lose: #f44336;
  --push: #2196F3;

  /* Betting colors */
  --bet-red: #dc143c;
  --bet-black: #333333;
  --bet-green: #00aa00;
  --bet-highlight: rgba(255, 215, 0, 0.3);

  /* Wheel colors */
  --wheel-bg: #2d2d2d;
  --wheel-border: #555;
  --ball-color: #ffd700;
  --number-bg: #fff;
  --number-text: #000;

  /* Betting board */
  --board-bg: #1a1a1a;
  --cell-bg: #333;
  --cell-hover: #444;
  --cell-selected: rgba(255, 215, 0, 0.5);

  /* Animations */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
  --shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* Font sizes */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 2rem;
}