/* ========================================
   Lì Xì Lucky Wheel - Design Tokens
   Tết Nguyên Đán Theme
   ======================================== */

:root {
  /* === Colors: Tết Theme === */
  
  /* Primary: Đỏ Tết - May mắn, thịnh vượng */
  --color-red-50: hsl(0, 85%, 95%);
  --color-red-100: hsl(0, 82%, 85%);
  --color-red-200: hsl(0, 80%, 72%);
  --color-red-300: hsl(0, 78%, 60%);
  --color-red-400: hsl(0, 75%, 50%);
  --color-red-500: hsl(0, 80%, 42%);
  --color-red-600: hsl(0, 85%, 35%);
  --color-red-700: hsl(0, 88%, 28%);
  --color-red-800: hsl(0, 90%, 22%);
  --color-red-900: hsl(0, 92%, 15%);
  
  /* Secondary: Vàng Kim - Giàu sang, phú quý */
  --color-gold-50: hsl(45, 100%, 96%);
  --color-gold-100: hsl(45, 95%, 88%);
  --color-gold-200: hsl(45, 92%, 75%);
  --color-gold-300: hsl(45, 90%, 62%);
  --color-gold-400: hsl(45, 95%, 52%);
  --color-gold-500: hsl(40, 100%, 45%);
  --color-gold-600: hsl(35, 100%, 40%);
  --color-gold-700: hsl(30, 95%, 35%);
  
  /* Semantic Colors */
  --color-primary: var(--color-red-600);
  --color-primary-light: var(--color-red-400);
  --color-primary-dark: var(--color-red-800);
  
  --color-secondary: var(--color-gold-400);
  --color-secondary-light: var(--color-gold-200);
  --color-secondary-dark: var(--color-gold-600);
  
  /* Background Gradient */
  --bg-gradient: linear-gradient(
    135deg,
    var(--color-red-900) 0%,
    var(--color-red-800) 40%,
    hsl(350, 85%, 18%) 100%
  );
  
  /* Text Colors */
  --color-text: hsl(45, 100%, 95%);
  --color-text-muted: hsl(45, 60%, 80%);
  --color-text-gold: var(--color-gold-300);
  
  /* === Typography === */
  --font-primary: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-decorative: 'Dancing Script', cursive;
  
  --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;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  
  /* === 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;
  
  /* === Borders === */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35);
  
  --shadow-glow-gold: 0 0 20px rgba(255, 193, 7, 0.4);
  --shadow-glow-red: 0 0 20px rgba(211, 47, 47, 0.4);
  
  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spin: 5000ms cubic-bezier(0.17, 0.67, 0.12, 0.99);
  
  /* === Z-Index === */
  --z-decorations: 0;
  --z-content: 10;
  --z-wheel: 20;
  --z-modal: 100;
  --z-confetti: 200;
}

/* Dark mode adjustments (default is already dark theme) */
@media (prefers-color-scheme: light) {
  :root {
    /* Keep dark theme for Tết vibe */
  }
}