/* ==========================================================================
   DESIGN SYSTEM VARIABLES (Dark Mode Default & Light Mode Toggle)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Syne:wght@700;800&display=swap');

:root {
  /* Font Families */
  --font-heading: 'Syne', sans-serif;
  --font-body: 'Outfit', sans-serif;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Border Radii */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 12px 24px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 24px 48px -8px rgba(0, 0, 0, 0.15);
  
  /* Dark Mode Variables (Default) */
  --bg-primary: #030014;
  --bg-secondary: #08071a;
  --bg-tertiary: #0e0d2e;
  
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  
  --accent-1: #6366f1; /* Indigo */
  --accent-1-rgb: 99, 102, 241;
  --accent-2: #a855f7; /* Purple */
  --accent-2-rgb: 168, 85, 247;
  --accent-3: #06b6d4; /* Cyan */
  --accent-3-rgb: 6, 182, 212;

  --grad-primary: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
  --grad-secondary: linear-gradient(135deg, var(--accent-3) 0%, #3b82f6 100%);
  --grad-dark: linear-gradient(180deg, rgba(3, 0, 20, 0.8) 0%, #030014 100%);
  --grad-glow: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15), transparent 70%);

  /* Glassmorphism Styles */
  --glass-bg: rgba(10, 10, 25, 0.5);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --glass-blur: 16px;

  /* Header and Mobile Nav Backgrounds */
  --header-bg: rgba(3, 0, 20, 0.75);
  --nav-menu-bg: rgba(8, 7, 26, 0.95);

  /* Card and Panel Colors */
  --card-bg: rgba(15, 12, 38, 0.4);
  --card-border: rgba(255, 255, 255, 0.05);
  
  /* Inputs */
  --input-bg: rgba(255, 255, 255, 0.03);
  --input-border: rgba(255, 255, 255, 0.08);
  --input-focus-border: var(--accent-1);
}

/* Light Mode Overrides */
body.light-theme {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  
  --accent-1: #4f46e5;
  --accent-1-rgb: 79, 70, 229;
  --accent-2: #7c3aed;
  --accent-2-rgb: 124, 58, 237;
  --accent-3: #0891b2;
  --accent-3-rgb: 8, 145, 178;

  --grad-primary: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
  --grad-secondary: linear-gradient(135deg, var(--accent-3) 0%, #2563eb 100%);
  --grad-dark: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, #f8fafc 100%);
  --grad-glow: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.08), transparent 70%);

  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-border-hover: rgba(0, 0, 0, 0.12);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.06);
  --glass-blur: 16px;

  --header-bg: rgba(248, 250, 252, 0.75);
  --nav-menu-bg: rgba(241, 245, 249, 0.95);

  --card-bg: rgba(255, 255, 255, 0.5);
  --card-border: rgba(0, 0, 0, 0.05);

  --input-bg: rgba(0, 0, 0, 0.02);
  --input-border: rgba(0, 0, 0, 0.08);
  --input-focus-border: var(--accent-1);
}