/* Design Tokens - Single Source of Truth */

:root {
  /* Spacing scale (8-point grid: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  
  /* Border radius scale (aligned to 8-point grid) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;
  
  /* Typography - Following design system specifications */
  /* Montserrat for headings (display), Inter for body/UI */
  --font-family-display: 'Montserrat', 'Segoe UI', Tahoma, sans-serif;
  --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  
  /* Fluid typography scale - responsive and aligned to 8-point line-height grid */
  --text-xs: clamp(12px, 0.75vw, 13px);        /* Caption/Meta - line-height: 16px */
  --text-sm: clamp(14px, 0.875vw, 14px);       /* Body-S - line-height: 24px */
  --text-base: clamp(15px, 1vw, 16px);         /* Body - line-height: 24px */
  --text-lg: clamp(17px, 1.125vw, 18px);       /* Body-L - line-height: 24px */
  --text-xl: clamp(20px, 1.5vw, 24px);         /* H4 - line-height: 32px */
  --text-2xl: clamp(28px, 2.25vw, 36px);       /* H2 - line-height: 40px */
  --text-3xl: clamp(36px, 3vw, 48px);          /* H1 - line-height: 56px */
  
  /* Line heights - strictly following 8px multiples for vertical rhythm */
  --leading-tight: 1.1;      /* For large headings */
  --leading-snug: 1.25;      /* For subheadings */
  --leading-normal: 1.6;     /* For body text (24px at 16px base) */
  --leading-relaxed: 1.75;   /* For lead paragraphs */
  
  /* Specific line-height tokens for precise control */
  --lh-16: 16px;
  --lh-24: 24px;
  --lh-32: 32px;
  --lh-40: 40px;
  --lh-48: 48px;
  --lh-56: 56px;
  
  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Transitions */
  --transition-fast: 0.04s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* Z-index scale */
  --z-base: 1;
  --z-header: 40;
  --z-tooltip: 50;
  --z-modal: 100;
  
  /* Layout - Container max-widths and responsive padding */
  --nav-height: 80px;  /* Reduced from 108px for better proportion */
  
  /* Container max-widths per design specs */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;    /* Primary content container */
  --container-2xl: 1440px;   /* Full-bleed sections */
  --container-3xl: 1920px;   /* 2K monitors */
  --container-4xl: 2560px;   /* 4K ultrawide */
  
  /* Responsive container padding - mobile first */
  --container-padding-mobile: 20px;    /* 360-639px */
  --container-padding-sm: 24px;        /* 640-767px */
  --container-padding-md: 32px;        /* 768-1023px */
  --container-padding-lg: 40px;        /* 1024-1279px */
  --container-padding-xl: 48px;        /* 1280+ */
  
  /* Section spacing - responsive */
  --section-padding-mobile: 48px;      /* Mobile: 48-64px vertical */
  --section-padding-tablet: 64px;      /* Tablet: 64-80px vertical */
  --section-padding-desktop: 80px;     /* Desktop: 80-96px vertical */
  --section-padding-large: 96px;       /* Large screens: 96px+ */
  
  /* Colors - Dark theme (default) */
  --bg: #0f1115;
  --surface: rgba(18, 20, 26, .72);
  --text: #e7e9ee;
  --text-muted: #b5b9c6;
  --line: rgba(255,255,255,.08);
  --brand: #6ba8dd;
  --brand-strong: #4c8fc8;
  --brand-subtle: #0b2239;
  --accent: #7ee0c6;
  
  /* Elevation system (Material Design inspired) */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0,0,0,0.05);
  --elevation-2: 0 4px 8px rgba(0,0,0,0.08);
  --elevation-3: 0 12px 24px rgba(0,0,0,0.12);
  --elevation-4: 0 20px 40px rgba(0,0,0,0.16);
  --elevation-5: 0 32px 64px rgba(0,0,0,0.20);
  
  /* Legacy shadow names */
  --shadow: var(--elevation-4);
  --shadow-lg: var(--elevation-5);
  --ring: 0 0 0 3px rgba(107,168,221,.35);
  
  /* Border widths */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;
  
  /* Gradients */
  --bg-gradient: radial-gradient(1400px 700px at 10% -10%, rgba(107, 168, 221, 0.15) 0%, transparent 50%),
                 radial-gradient(1200px 600px at 90% 20%, rgba(76, 143, 200, 0.12) 0%, transparent 55%),
                 radial-gradient(1000px 500px at 50% 100%, rgba(126, 224, 198, 0.08) 0%, transparent 60%),
                 linear-gradient(180deg, #0f1115 0%, #10131a 100%);
  --gradient-brand: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  --gradient-brand-dark: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  
  /* Glass frosting effect */
  --glass-frost: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-top: rgba(255, 255, 255, 0.25);
}

/* Light theme overrides */
[data-theme="light"] {
  --bg: #f6f8fc;
  --surface: rgba(255,255,255,.72);
  --text: #1b1f29;
  --text-muted: #3a4555;
  --line: rgba(12, 26, 46, .10);
  --brand: #3a7cc0;
  --brand-strong: #2f6aa7;
  --brand-subtle: rgba(58,124,192,.10);
  --accent: #10b981;
  
  --elevation-1: 0 1px 3px rgba(0,0,0,0.08);
  --elevation-2: 0 4px 12px rgba(0,0,0,0.10);
  --elevation-3: 0 12px 28px rgba(0,0,0,0.12);
  --elevation-4: 0 20px 48px rgba(0,0,0,0.14);
  --elevation-5: 0 32px 72px rgba(0,0,0,0.16);
  
  --shadow: var(--elevation-4);
  --shadow-lg: var(--elevation-5);
  
  --bg-gradient: radial-gradient(1400px 700px at 10% -10%, rgba(58, 124, 192, 0.25) 0%, transparent 50%),
                 radial-gradient(1200px 600px at 90% 20%, rgba(16, 185, 129, 0.18) 0%, transparent 55%),
                 radial-gradient(1000px 500px at 50% 100%, rgba(107, 168, 221, 0.15) 0%, transparent 60%),
                 linear-gradient(180deg, #f0f5ff 0%, #f8fbff 100%);
  
  /* Glass frosting effect for light theme */
  --glass-frost: rgba(255, 255, 255, 0.3);
  --glass-border: rgba(58, 124, 192, 0.2);
  --glass-border-top: rgba(58, 124, 192, 0.3);
  
  /* Darker contact form text for better readability */
  --contact-text: #2d2d2d;
  --contact-input-text: #1a1a1a;
}

/* Pastel theme - Soft, professional & colorful */
[data-theme="pastel"] {
  /* Richer peachy-pink background for better contrast */
  --bg: #f5e6e8;
  --surface: rgba(255, 251, 250, 0.85);
  
  /* Rich but readable text colors */
  --text: #2d1b2e;
  --text-muted: #6b5866;
  
  /* Subtle lavender borders */
  --line: rgba(180, 167, 214, 0.2);
  
  /* Soft periwinkle blue as primary brand */
  --brand: #8b9fd9;
  --brand-strong: #6b82c7;
  --brand-subtle: rgba(139, 159, 217, 0.12);
  
  /* Soft coral-pink accent */
  --accent: #f1a7a1;
  
  /* Softer shadows for dreamy feel */
  --elevation-1: 0 1px 3px rgba(139, 159, 217, 0.1);
  --elevation-2: 0 4px 12px rgba(139, 159, 217, 0.12);
  --elevation-3: 0 12px 28px rgba(139, 159, 217, 0.15);
  --elevation-4: 0 20px 48px rgba(139, 159, 217, 0.18);
  --elevation-5: 0 32px 72px rgba(139, 159, 217, 0.22);
  
  --shadow: var(--elevation-4);
  --shadow-lg: var(--elevation-5);
  
  /* Multi-color vibrant gradient background - darker and more saturated */
  --bg-gradient: radial-gradient(1400px 700px at 10% -10%, rgba(241, 167, 161, 0.35) 0%, transparent 50%),
                 radial-gradient(1200px 600px at 90% 20%, rgba(139, 159, 217, 0.38) 0%, transparent 55%),
                 radial-gradient(1000px 500px at 50% 100%, rgba(165, 214, 167, 0.35) 0%, transparent 60%),
                 radial-gradient(800px 400px at 70% 40%, rgba(255, 245, 157, 0.25) 0%, transparent 50%),
                 linear-gradient(180deg, #f0dde0 0%, #e8dce5 50%, #dfe8e0 100%);
  
  /* Glass frosting effect for pastel theme */
  --glass-frost: rgba(255, 251, 250, 0.4);
  --glass-border: rgba(139, 159, 217, 0.25);
  --glass-border-top: rgba(241, 167, 161, 0.3);
  
  /* Adjusted ring focus for pastel */
  --ring: 0 0 0 3px rgba(139, 159, 217, 0.35);
  
  /* Pastel gradient variants */
  --gradient-brand: linear-gradient(135deg, #8b9fd9 0%, #f1a7a1 100%);
  --gradient-brand-dark: linear-gradient(135deg, #6b82c7 0%, #e08b85 100%);
  
  /* Extended pastel color palette for variety - Optimized for readability */
  --pastel-green: #a5d6a7;
  --pastel-green-strong: #4caf50;  /* Darker for better contrast */
  --pastel-green-subtle: rgba(165, 214, 167, 0.15);
  
  --pastel-yellow: #fff59d;
  --pastel-yellow-strong: #f9a825;  /* Much darker yellow-orange for readability */
  --pastel-yellow-subtle: rgba(255, 245, 157, 0.2);
  
  --pastel-lavender: #b4a7d6;
  --pastel-lavender-strong: #7e57c2;  /* Darker purple for better contrast */
  --pastel-lavender-subtle: rgba(180, 167, 214, 0.15);
  
  --pastel-mint: #b2dfdb;
  --pastel-mint-strong: #26a69a;  /* Darker teal for better contrast */
  --pastel-mint-subtle: rgba(178, 223, 219, 0.2);
  
  --pastel-peach: #ffccbc;
  --pastel-peach-strong: #ff7043;  /* Darker coral-orange for better contrast */
  --pastel-peach-subtle: rgba(255, 204, 188, 0.2);
  
  /* Darker contact form text for better readability */
  --contact-text: #2d2d2d;
  --contact-input-text: #1a1a1a;
}

/* Responsive base font size scaling for optimal readability */
/* Mobile-first: base 16px */

@media (min-width: 768px) {
  :root {
    /* Tablet adjustments */
    --container-padding: var(--container-padding-md);
  }
}

@media (min-width: 1024px) {
  :root {
    /* Desktop adjustments */
    --container-padding: var(--container-padding-lg);
  }
}

@media (min-width: 1280px) {
  :root {
    --container-padding: var(--container-padding-xl);
  }
}

@media (min-width: 1920px) {
  html {
    font-size: 17px;  /* Slight increase for 2K monitors */
  }
}

@media (min-width: 2560px) {
  html {
    font-size: 18px;  /* Moderate increase for 4K displays */
  }
}