/* ==========================================================================
   Lalbagh Sports Carnival (LSC) - Core Design System & Stylesheet
   Created: 2026-07-11
   Author: Senior UX/UI Architect
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Google Fonts & Design Tokens
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors - Clean White/Light Theme Default */
  --color-black: #0F172A;          /* Slate 900 for dark text elements */
  --color-dark-base: #F8FAFC;      /* Clean background base layer */
  --color-dark-surface: #FFFFFF;   /* Container & Card backgrounds */
  --color-dark-card: #FFFFFF;
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-hover: rgba(15, 23, 42, 0.15);
  
  /* Text */
  --color-text-primary: #0F172A;   /* Slate 900 */
  --color-text-secondary: #475569; /* Slate 600 */
  --color-text-mute: #94A3B8;      /* Slate 400 */
  
  /* Accents */
  --color-red: #fe0000;            /* Pure Red */
  --color-red-hover: #d60000;
  --color-red-glow: rgba(254, 0, 0, 0.12);
  --color-red-glow-pulse: rgba(254, 0, 0, 0.4);
  
  --color-green: #10B981;          /* Emerald Green */
  --color-green-hover: #059669;
  --color-green-glow: rgba(16, 185, 129, 0.12);
  
  --color-blue: #3B82F6;
  --color-gold: #F59E0B;
  
  /* Header Backgrounds */
  --color-header-bg: rgba(255, 255, 255, 0.85);
  --color-header-scrolled: rgba(255, 255, 255, 0.95);
  --color-mobile-menu-bg: rgba(255, 255, 255, 0.97);
  
  /* Typography */
  --font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Spacing Grid */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  
  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Shadows & Depth */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow-red: 0 0 15px var(--color-red-glow);
  --shadow-glow-green: 0 0 15px var(--color-green-glow);
  
  /* Layout */
  --container-width: 1280px;
}

/* Dark Mode Override */
html[data-theme="dark"] {
  --color-black: #06080C;
  --color-dark-base: #0B0F17;
  --color-dark-surface: #121824;
  --color-dark-card: #182030;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  
  --color-text-primary: #F3F4F6;
  --color-text-secondary: #9CA3AF;
  --color-text-mute: #6B7280;
  
  --color-red: #fe0000;
  --color-red-hover: #d60000;
  --color-red-glow: rgba(254, 0, 0, 0.25);
  --color-red-glow-pulse: rgba(254, 0, 0, 0.5);
  
  --color-green: #2ED573;
  --color-green-hover: #26AF5F;
  --color-green-glow: rgba(46, 213, 115, 0.25);
  
  --color-blue: #3E8BFF;
  --color-gold: #FFA502;
  
  --color-header-bg: rgba(11, 15, 23, 0.85);
  --color-header-scrolled: rgba(6, 8, 12, 0.95);
  --color-mobile-menu-bg: rgba(6, 8, 12, 0.97);
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.6);
}