/* Design tokens & Modern color palette v2.0 */
:root {
  /* Modern Core Colors */
  --primary-bg: #0a0a0a;
  --secondary-bg: #1a1a1a;
  --tertiary-bg: #2a2a2a;
  
  --felt-green: #0a5f20;
  --felt-green-dark: #064015;
  --gold: #ffd700;
  --gold-dark: #f9a825;
  --red: #e53935;
  --red-dark: #c62828;
  --black: #222;
  
  /* Modern Gradients */
  --gradient-gold: linear-gradient(135deg, #ffd700, #f9a825);
  --gradient-green: linear-gradient(135deg, #4CAF50, #2d7a30);
  --gradient-red: linear-gradient(135deg, #f44336, #c62828);
  --gradient-blue: linear-gradient(135deg, #2196F3, #1565C0);
  --gradient-purple: linear-gradient(135deg, #9C27B0, #6A1B9A);
  --gradient-dark: linear-gradient(135deg, #2a2a2a, #1a1a1a);

  /* Outcomes with modern styling */
  --win: #4CAF50;
  --win-glow: rgba(76, 175, 80, 0.4);
  --blackjack: #FFD700;
  --blackjack-glow: rgba(255, 215, 0, 0.4);
  --push: #2196F3;
  --push-glow: rgba(33, 150, 243, 0.4);
  --lose: #f44336;
  --lose-glow: rgba(244, 67, 54, 0.4);

  /* Modern Card Design */
  --card-bg: #ffffff;
  --card-bg-gradient: linear-gradient(135deg, #ffffff, #f5f5f5);
  --card-index: #222;
  --card-index-red: #e53935;
  --card-border: #e0e0e0;
  --card-shadow: 0 8px 24px rgba(0,0,0,0.5);
  --card-shadow-hover: 0 12px 32px rgba(0,0,0,0.6);
  --card-radius: 12px;

  /* Card Back - Modern Design */
  --card-back-bg: linear-gradient(135deg, #1a5e1a 0%, #0d3b0d 100%);
  --card-back-border: 2px solid #ffd700;
  --card-back-pattern-a: rgba(255,255,255,0.15);
  --card-back-pattern-b: rgba(255,255,255,0.08);
  --card-back-shadow: 0 8px 24px rgba(0,0,0,0.6);

  /* Button States */
  --button-primary: var(--gradient-gold);
  --button-success: var(--gradient-green);
  --button-danger: var(--gradient-red);
  --button-info: var(--gradient-blue);
  --button-shadow: 0 4px 12px rgba(0,0,0,0.4);
  --button-shadow-active: 0 2px 6px rgba(0,0,0,0.6);

  /* Glassmorphism effects */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: 1px solid rgba(255, 255, 255, 0.15);
  --glass-blur: 20px;

  /* Rarity Colors (Enhanced) */
  --rarity-common: #9e9e9e;
  --rarity-uncommon: #4caf50;
  --rarity-rare: #2196f3;
  --rarity-epic: #9c27b0;
  --rarity-legendary: #f44336;
  --rarity-special: #ffd700;
  --rarity-mega-jackpot: #ff6b35;

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

  /* Border Radius System */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-round: 50%;

  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;

  /* Z-index layers */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-overlay: 9000;
  --z-modal: 9500;
  --z-chat: 9998;
  --z-action-bar: 9999;
  --z-notification: 10000;
}

/* Dark mode support (future feature) */
@media (prefers-color-scheme: dark) {
  :root {
    --card-bg: #2a2a2a;
    --card-bg-gradient: linear-gradient(135deg, #2a2a2a, #1f1f1f);
    --card-index: #f5f5f5;
    --card-border: #444;
  }
}

/* High contrast mode for accessibility */
@media (prefers-contrast: high) {
  :root {
    --card-shadow: 0 4px 16px rgba(0,0,0,0.9);
    --card-border: #000;
    --button-shadow: 0 4px 16px rgba(0,0,0,0.8);
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;
  }
}