/* ===================================================
   DESIGN SYSTEM - CSS Custom Properties
   Premium Portfolio Theme with Enhanced Colors
   =================================================== */

:root {
   /* ─────────────────────────────────────────────────
       COLOR PALETTE - Vibrant & Modern
       ───────────────────────────────────────────────── */

   /* Primary Brand Colors - More Vibrant */
   --color-brand-primary: hsl(161, 75%, 50%);
   /* Bright Emerald Teal */
   --color-brand-secondary: hsl(191, 100%, 55%);
   /* Electric Cyan */
   --color-brand-accent: hsl(270, 80%, 65%);
   /* Vivid Purple */
   --color-brand-warm: hsl(25, 95%, 55%);
   /* Warm Orange */

   /* Background Hierarchy - Rich Depth */
   --bg-base: hsl(240, 18%, 4%);
   /* Deep Space Black */
   --bg-elevated: hsl(240, 15%, 6%);
   /* Elevated Surface */
   --bg-surface: hsl(240, 12%, 9%);
   /* Card Background */
   --bg-overlay: hsla(240, 18%, 4%, 0.92);
   /* Modal Overlay */

   /* Text Hierarchy - Better Contrast */
   --text-primary: hsl(0, 0%, 98%);
   /* Pure White */
   --text-secondary: hsl(220, 12%, 65%);
   /* Lighter Muted Gray */
   --text-tertiary: hsl(220, 10%, 50%);
   /* Subtle Gray */
   --text-accent: var(--color-brand-primary);

   /* Gradient Definitions - More Dynamic */
   --gradient-brand: linear-gradient(135deg,
         var(--color-brand-primary) 0%,
         var(--color-brand-secondary) 50%,
         var(--color-brand-accent) 100%);
   --gradient-brand-simple: linear-gradient(135deg,
         var(--color-brand-primary) 0%,
         var(--color-brand-secondary) 100%);
   --gradient-brand-vertical: linear-gradient(180deg,
         var(--color-brand-primary) 0%,
         var(--color-brand-secondary) 100%);
   --gradient-glow: radial-gradient(circle at center,
         hsla(161, 75%, 50%, 0.2) 0%,
         transparent 70%);
   --gradient-card: linear-gradient(145deg,
         hsla(240, 15%, 12%, 0.9) 0%,
         hsla(240, 18%, 6%, 0.98) 100%);
   --gradient-mesh:
      radial-gradient(at 40% 20%, hsla(161, 75%, 50%, 0.1) 0%, transparent 50%),
      radial-gradient(at 80% 0%, hsla(191, 100%, 55%, 0.08) 0%, transparent 50%),
      radial-gradient(at 0% 50%, hsla(270, 80%, 65%, 0.06) 0%, transparent 50%),
      radial-gradient(at 90% 90%, hsla(25, 95%, 55%, 0.04) 0%, transparent 40%);

   /* Glass Effects - Refined */
   --glass-bg: hsla(240, 15%, 10%, 0.75);
   --glass-border: hsla(0, 0%, 100%, 0.1);
   --glass-blur: blur(20px);

   /* ─────────────────────────────────────────────────
       SHADOWS & EFFECTS - Enhanced Glow
       ───────────────────────────────────────────────── */
   --shadow-sm: 0 2px 8px hsla(0, 0%, 0%, 0.35);
   --shadow-md: 0 8px 24px hsla(0, 0%, 0%, 0.45);
   --shadow-lg: 0 16px 48px hsla(0, 0%, 0%, 0.55);
   --shadow-glow: 0 0 40px hsla(161, 75%, 50%, 0.25);
   --shadow-glow-intense: 0 0 60px hsla(161, 75%, 50%, 0.4);
   --shadow-glow-cyan: 0 0 40px hsla(191, 100%, 55%, 0.25);
   --shadow-glow-purple: 0 0 40px hsla(270, 80%, 65%, 0.25);

   /* ─────────────────────────────────────────────────
       TYPOGRAPHY SCALE
       ───────────────────────────────────────────────── */
   --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

   --text-xs: 0.75rem;
   /* 12px */
   --text-sm: 0.875rem;
   /* 14px */
   --text-base: 1rem;
   /* 16px */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.5rem;
   /* 24px */
   --text-3xl: 2rem;
   /* 32px */
   --text-4xl: 2.5rem;
   /* 40px */
   --text-5xl: 3.5rem;
   /* 56px */
   --text-6xl: 4.5rem;
   /* 72px */

   --font-light: 300;
   --font-regular: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;

   --leading-tight: 1.2;
   --leading-normal: 1.6;
   --leading-relaxed: 1.8;

   /* ─────────────────────────────────────────────────
       SPACING SCALE
       ───────────────────────────────────────────────── */
   --space-1: 0.25rem;
   /* 4px */
   --space-2: 0.5rem;
   /* 8px */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-8: 2rem;
   /* 32px */
   --space-10: 2.5rem;
   /* 40px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */
   --space-32: 8rem;
   /* 128px */

   /* ─────────────────────────────────────────────────
       BORDER RADIUS
       ───────────────────────────────────────────────── */
   --radius-sm: 0.375rem;
   /* 6px */
   --radius-md: 0.5rem;
   /* 8px */
   --radius-lg: 0.75rem;
   /* 12px */
   --radius-xl: 1rem;
   /* 16px */
   --radius-2xl: 1.5rem;
   /* 24px */
   --radius-full: 9999px;

   /* ─────────────────────────────────────────────────
       TRANSITIONS - Smooth & Bouncy
       ───────────────────────────────────────────────── */
   --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

   --duration-fast: 150ms;
   --duration-normal: 300ms;
   --duration-slow: 500ms;
   --duration-slower: 700ms;

   --transition-base: all var(--duration-normal) var(--ease-smooth);
   --transition-fast: all var(--duration-fast) var(--ease-smooth);
   --transition-slow: all var(--duration-slow) var(--ease-out-expo);
   --transition-bounce: all var(--duration-normal) var(--ease-bounce);
   --transition-transform: transform var(--duration-normal) var(--ease-smooth);

   /* ─────────────────────────────────────────────────
       LAYOUT
       ───────────────────────────────────────────────── */
   --container-max: 1200px;
   --container-narrow: 900px;
   --section-padding: var(--space-24);
   --navbar-height: 80px;

   /* ─────────────────────────────────────────────────
       Z-INDEX SCALE
       ───────────────────────────────────────────────── */
   --z-base: 0;
   --z-elevated: 10;
   --z-sticky: 100;
   --z-overlay: 500;
   --z-modal: 1000;
   --z-max: 9999;
}

/* ─────────────────────────────────────────────────
   LIGHT THEME OVERRIDES
   ───────────────────────────────────────────────── */
[data-theme="light"] {
   /* Backgrounds */
   --bg-base: hsl(0, 0%, 98%);
   --bg-elevated: hsl(0, 0%, 100%);
   --bg-surface: hsl(240, 5%, 96%);
   --bg-overlay: hsla(0, 0%, 98%, 0.92);

   /* Text */
   --text-primary: hsl(240, 15%, 10%);
   --text-secondary: hsl(240, 5%, 35%);
   --text-tertiary: hsl(240, 5%, 55%);

   /* Gradients */
   --gradient-card: linear-gradient(145deg,
         hsla(0, 0%, 100%, 0.9) 0%,
         hsla(240, 10%, 95%, 0.98) 100%);

   --glass-bg: hsla(0, 0%, 100%, 0.75);
   --glass-border: hsla(240, 10%, 10%, 0.08);

   /* Shadows - softer for light mode */
   --shadow-sm: 0 2px 8px hsla(240, 10%, 10%, 0.05);
   --shadow-md: 0 8px 24px hsla(240, 10%, 10%, 0.08);
   --shadow-lg: 0 16px 48px hsla(240, 10%, 10%, 0.12);
   --shadow-glow: 0 0 30px hsla(161, 75%, 50%, 0.15);
}