/* ==========================================================================
   VARIABLES.CSS — Design Tokens & Theme System
   Complete CSS custom properties for Light & Dark themes
   ========================================================================== */

/* ---------- Light Theme (Default) ---------- */
:root {
  /* Primary Colors */
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1d4ed8;
  --color-primary-rgb: 37, 99, 235;

  /* Secondary / Accent */
  --color-secondary: #7c3aed;
  --color-secondary-light: #8b5cf6;
  --color-secondary-dark: #6d28d9;
  --color-secondary-rgb: 124, 58, 237;

  /* Accent / Neon */
  --color-accent: #06b6d4;
  --color-accent-light: #22d3ee;
  --color-accent-rgb: 6, 182, 212;

  /* Success / Warning / Error */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-primary-hover: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
  --gradient-hero: linear-gradient(135deg, #eff6ff 0%, #ede9fe 50%, #f0f9ff 100%);
  --gradient-text: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
  --gradient-section: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

  /* Backgrounds */
  --bg-body: #ffffff;
  --bg-section: #f8fafc;
  --bg-section-alt: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-header: rgba(255, 255, 255, 0.85);
  --bg-header-scroll: rgba(255, 255, 255, 0.95);
  --bg-footer: #0f172a;
  --bg-input: #f8fafc;
  --bg-code: #f1f5f9;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;
  --text-link: #2563eb;
  --text-link-hover: #1d4ed8;

  /* Borders */
  --border-color: #e2e8f0;
  --border-color-light: #f1f5f9;
  --border-color-focus: #2563eb;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.1);
  --shadow-button: 0 4px 14px rgba(37, 99, 235, 0.3);
  --shadow-button-hover: 0 6px 20px rgba(37, 99, 235, 0.4);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: 20px;

  /* Typography */
  --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Font Sizes — Fluid with clamp() */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-xl: clamp(1.15rem, 1.05rem + 0.5vw, 1.25rem);
  --text-2xl: clamp(1.35rem, 1.15rem + 1vw, 1.5rem);
  --text-3xl: clamp(1.6rem, 1.3rem + 1.5vw, 1.875rem);
  --text-4xl: clamp(1.9rem, 1.4rem + 2.5vw, 2.25rem);
  --text-5xl: clamp(2.2rem, 1.5rem + 3.5vw, 3rem);
  --text-6xl: clamp(2.5rem, 1.5rem + 5vw, 3.75rem);

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Line Heights */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* Letter Spacing */
  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;

  /* Spacing Scale */
  --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;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(4rem, 3rem + 5vw, 7rem);

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-loader: 900;

  /* Container */
  --container-max: 1280px;
  --container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* Header */
  --header-height: 4.5rem;

  /* Scroll Progress */
  --scroll-progress: 0%;
}

/* ---------- Dark Theme ---------- */
[data-theme="dark"] {
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --gradient-primary-hover: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-hero: linear-gradient(135deg, #0f0f23 0%, #1a1145 50%, #0c1929 100%);
  --gradient-text: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  --gradient-card: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(20, 20, 50, 0.6) 100%);
  --gradient-section: linear-gradient(180deg, #0f0f23 0%, #151530 100%);

  /* Backgrounds */
  --bg-body: #0f0f23;
  --bg-section: #121228;
  --bg-section-alt: #151530;
  --bg-card: #1a1a3e;
  --bg-card-hover: #1f1f4a;
  --bg-header: rgba(15, 15, 35, 0.8);
  --bg-header-scroll: rgba(15, 15, 35, 0.95);
  --bg-footer: #0a0a1a;
  --bg-input: #1a1a3e;
  --bg-code: #1a1a3e;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  /* Text Colors */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #64748b;
  --text-link: #60a5fa;
  --text-link-hover: #93bbfc;

  /* Borders */
  --border-color: rgba(148, 163, 184, 0.15);
  --border-color-light: rgba(148, 163, 184, 0.08);
  --border-color-focus: #60a5fa;

  /* Shadows — with glow in dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 40px rgba(124, 58, 237, 0.15);
  --shadow-button: 0 4px 14px rgba(59, 130, 246, 0.3);
  --shadow-button-hover: 0 6px 20px rgba(139, 92, 246, 0.4);

  /* Glass — Glassmorphism */
  --glass-bg: rgba(30, 30, 60, 0.5);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 24px;
}