/* ============================================
   ROBO CAT CASINO - CSS VARIABLES (HSL Format)
   Design System v2.0 | January 2026
   ============================================ */
:root {
  /* Primary Colors (HSL) */
  --primary-h: 38;
  --primary-s: 92%;
  --primary-l: 50%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-hover: hsl(36, 90%, 45%);
  --primary-rgb: 245, 158, 11;
  
  /* Secondary Colors */
  --secondary: hsl(258, 90%, 66%);
  --secondary-hover: hsl(258, 80%, 56%);
  
  /* Background Colors */
  --bg-dark: hsl(0, 0%, 6%);
  --bg-card: hsl(0, 0%, 10%);
  --bg-card-hover: hsl(0, 0%, 15%);
  --bg-section: hsl(0, 0%, 8%);
  
  /* Text Colors - Enhanced contrast for readability */
  --text-primary: hsl(0, 0%, 100%);
  --text-secondary: hsl(0, 0%, 75%); /* Improved from 64% to 75% for better readability */
  --text-muted: hsl(0, 0%, 55%); /* Improved from 45% to 55% */
  
  /* Border Colors */
  --border-color: hsl(0, 0%, 16%);
  --border-hover: hsl(38, 92%, 50%);
  
  /* Status Colors */
  --success: hsl(142, 71%, 45%);
  --success-light: hsl(142, 71%, 45%, 0.1);
  --error: hsl(0, 84%, 60%);
  --error-light: hsl(0, 84%, 60%, 0.1);
  --warning: hsl(38, 92%, 50%);
  --info: hsl(217, 91%, 60%);
  
  /* Gradients */
  --gradient-gold: linear-gradient(135deg, hsl(38, 92%, 50%) 0%, hsl(45, 93%, 55%) 50%, hsl(38, 92%, 50%) 100%);
  --gradient-gold-dark: linear-gradient(135deg, hsl(36, 90%, 45%) 0%, hsl(38, 92%, 50%) 100%);
  --gradient-dark: linear-gradient(180deg, hsl(0, 0%, 10%) 0%, hsl(0, 0%, 6%) 100%);
  --gradient-hero: linear-gradient(135deg, hsla(38, 92%, 50%, 0.1) 0%, hsla(258, 90%, 66%, 0.1) 100%);
  --gradient-card: linear-gradient(180deg, hsla(38, 92%, 50%, 0.05) 0%, transparent 100%);
  
  /* Shadows */
  --shadow-gold: 0 4px 30px hsla(38, 92%, 50%, 0.2);
  --shadow-gold-strong: 0 8px 40px hsla(38, 92%, 50%, 0.4);
  --shadow-card: 0 4px 20px hsla(0, 0%, 0%, 0.3);
  --shadow-card-hover: 0 8px 30px hsla(0, 0%, 0%, 0.4);
  
  /* Spacing */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50px;
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', sans-serif;
  
  /* Font Sizes */
  --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: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  
  /* Container */
  --container-max: 1200px;
  --container-padding: 16px;
  
  /* Section Spacing */
  --section-padding: 80px;
  --section-padding-mobile: 48px;
}

/* Dark Theme is default */
body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-primary);
  line-height: var(--leading-normal);
}