/* AnnexLK Design System Variables */

:root {
  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Outfit', var(--font-sans);

  /* Color Palette - Premium HSL tailored colors */
  --primary-hue: 215;
  --secondary-hue: 25;

  /* Brand Colors */
  --primary: HSL(var(--primary-hue), 90%, 43%);
  --primary-hover: HSL(var(--primary-hue), 95%, 35%);
  --primary-light: HSL(var(--primary-hue), 85%, 95%);
  --primary-glow: HSLA(var(--primary-hue), 90%, 43%, 0.15);

  --secondary: HSL(var(--secondary-hue), 95%, 50%);
  --secondary-hover: HSL(var(--secondary-hue), 100%, 40%);
  --secondary-light: HSL(var(--secondary-hue), 100%, 96%);

  /* Functional Colors */
  --success: HSL(142, 70%, 45%);
  --success-light: HSL(142, 70%, 95%);
  --warning: HSL(45, 95%, 48%);
  --warning-light: HSL(45, 95%, 95%);
  --danger: HSL(350, 80%, 50%);
  --danger-light: HSL(350, 80%, 96%);

  /* Light Theme Neutrals */
  --background: HSL(220, 20%, 98%);
  --surface: HSL(0, 0%, 100%);
  --surface-border: HSL(220, 15%, 90%);
  --text-main: HSL(220, 30%, 15%);
  --text-muted: HSL(220, 15%, 45%);
  --text-light: HSL(220, 15%, 65%);

  /* Gradients */
  --grad-hero: linear-gradient(135deg, HSL(var(--primary-hue), 80%, 20%) 0%, HSL(var(--primary-hue), 95%, 38%) 100%);
  --grad-accent: linear-gradient(135deg, var(--secondary) 0%, HSL(15, 95%, 55%) 100%);
  --grad-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 16px -6px rgba(0, 0, 0, 0.06);
  --shadow-primary: 0 8px 20px -4px HSLA(var(--primary-hue), 90%, 43%, 0.3);

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

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-md: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout limits */
  --max-width: 1280px;
  --header-height: 72px;

  /* Fluid Spacing & Typography */
  --space-sm: clamp(8px, 1.5vw, 12px);
  --space-md: clamp(16px, 2.5vw, 24px);
  --space-lg: clamp(20px, 4vw, 30px);
  --space-xl: clamp(30px, 6vw, 60px);

  --font-size-hero: clamp(24px, 5.5vw, 42px);
  --font-size-h2: clamp(20px, 4vw, 28px);
}

/* Dark Theme Variables override */
[data-theme="dark"] {
  --background: HSL(222, 32%, 16%);
  --surface: HSL(222, 30%, 20%);
  --surface-border: HSL(220, 24%, 29%);
  --text-main: HSL(210, 40%, 98%);
  --text-muted: HSL(215, 20%, 75%);
  --text-light: HSL(215, 15%, 55%);
  --grad-glass: linear-gradient(135deg, rgba(51, 65, 85, 0.72) 0%, rgba(51, 65, 85, 0.45) 100%);
  --primary-light: HSL(var(--primary-hue), 45%, 22%);
  --secondary-light: HSL(var(--secondary-hue), 45%, 22%);
}