/* variables.css - Enhanced Animation & Design System */

:root {
  /* =================
     CORE COLOR SYSTEM
     ================= */
  --color-primary: #007bff;
  --color-primary-rgb: 0, 123, 255;
  --color-primary-dark: #0056b3;
  --color-primary-light: #3395ff;
  --color-secondary: #6c757d;
  --color-secondary-rgb: 108, 117, 125;
  --color-success: #10b981;
  --color-success-rgb: 16, 185, 129;
  --color-warning: #f59e0b;
  --color-warning-rgb: 245, 158, 11;
  --color-error: #ef4444;
  --color-error-rgb: 239, 68, 68;
  --color-info: #3b82f6;
  --color-info-rgb: 59, 130, 246;

  /* Accent Colors */
  --color-accent: #007bff;
  --color-accent-rgb: 0, 123, 255;
  --color-accent-secondary: #7c3aed;
  --color-accent-tertiary: #ec4899;

  /* Background System */
  --color-background-primary: #ffffff;
  --color-background-secondary: #f7fafc;
  --color-background-tertiary: #edf2f7;
  --color-background-light: #f8f9fa;
  --color-background-dark: #343a40;
  --color-background-overlay: rgba(0, 0, 0, 0.5);

  /* Text System */
  --color-text-primary: #333;
  --color-text-secondary: #666;
  --color-text-tertiary: #a0aec0;
  --color-text-muted: #718096;
  --color-text-inverted: #fff;
  --color-headings: #222;

  /* Border & Accent */
  --color-border: #ddd;
  --color-border-light: #e2e8f0;
  --color-border-dark: #4a5568;

  /* Link System */
  --color-links: #007bff;
  --color-links-hover: #0056b3;

  /* =================
     OPACITY SYSTEM
     ================= */
  --opacity-0: 0;
  --opacity-subtle: 0.02;
  --opacity-light: 0.05;
  --opacity-soft: 0.1;
  --opacity-medium: 0.15;
  --opacity-visible: 0.2;
  --opacity-moderate: 0.3;
  --opacity-strong: 0.4;
  --opacity-heavy: 0.5;
  --opacity-prominent: 0.6;
  --opacity-dominant: 0.7;
  --opacity-opaque: 0.8;
  --opacity-near-solid: 0.9;
  --opacity-solid: 1;

  /* Dynamic Alpha Colors */
  --color-primary-alpha-subtle: rgba(var(--color-primary-rgb), var(--opacity-subtle));
  --color-primary-alpha-light: rgba(var(--color-primary-rgb), var(--opacity-light));
  --color-primary-alpha-soft: rgba(var(--color-primary-rgb), var(--opacity-soft));
  --color-primary-alpha-medium: rgba(var(--color-primary-rgb), var(--opacity-medium));
  --color-primary-alpha-visible: rgba(var(--color-primary-rgb), var(--opacity-visible));
  --color-primary-alpha-moderate: rgba(var(--color-primary-rgb), var(--opacity-moderate));
  --color-primary-alpha-strong: rgba(var(--color-primary-rgb), var(--opacity-strong));

  --color-white-alpha-subtle: rgba(255, 255, 255, var(--opacity-subtle));
  --color-white-alpha-light: rgba(255, 255, 255, var(--opacity-light));
  --color-white-alpha-soft: rgba(255, 255, 255, var(--opacity-soft));
  --color-white-alpha-medium: rgba(255, 255, 255, var(--opacity-medium));
  --color-white-alpha-visible: rgba(255, 255, 255, var(--opacity-visible));
  --color-white-alpha-moderate: rgba(255, 255, 255, var(--opacity-moderate));
  --color-white-alpha-strong: rgba(255, 255, 255, var(--opacity-strong));

  --color-black-alpha-subtle: rgba(0, 0, 0, var(--opacity-subtle));
  --color-black-alpha-light: rgba(0, 0, 0, var(--opacity-light));
  --color-black-alpha-soft: rgba(0, 0, 0, var(--opacity-soft));
  --color-black-alpha-medium: rgba(0, 0, 0, var(--opacity-medium));
  --color-black-alpha-visible: rgba(0, 0, 0, var(--opacity-visible));
  --color-black-alpha-moderate: rgba(0, 0, 0, var(--opacity-moderate));
  --color-black-alpha-strong: rgba(0, 0, 0, var(--opacity-strong));

  /* =================
     ENHANCED ANIMATION SYSTEM
     ================= */

  /* Animation Durations */
  --duration-instant: 0ms;
  --duration-micro: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-moderate: 400ms;
  --duration-slow: 500ms;
  --duration-slower: 750ms;
  --duration-slowest: 1000ms;
  --duration-ultra-slow: 1500ms;
  --duration-glacial: 2000ms;

  /* Animation Easing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-anticipate: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Legacy Support */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* Stagger Animation System */
  --stagger-base: 0.1s;
  --stagger-micro: 0.03s;
  --stagger-fast: 0.05s;
  --stagger-normal: 0.1s;
  --stagger-slow: 0.15s;
  --stagger-slower: 0.2s;

  /* Transform Values */
  --scale-none: 1;
  --scale-micro: 1.01;
  --scale-small: 1.025;
  --scale-normal: 1.05;
  --scale-medium: 1.1;
  --scale-large: 1.15;
  --scale-down-micro: 0.99;
  --scale-down-small: 0.975;
  --scale-down-normal: 0.95;
  --scale-down-medium: 0.9;

  /* Translation Values */
  --translate-micro: 1px;
  --translate-small: 2px;
  --translate-normal: 4px;
  --translate-medium: 8px;
  --translate-large: 12px;
  --translate-xl: 16px;
  --translate-2xl: 24px;

  /* Rotation Values */
  --rotate-micro: 0.5deg;
  --rotate-small: 1deg;
  --rotate-normal: 2deg;
  --rotate-medium: 5deg;
  --rotate-large: 10deg;

  /* Scroll Animation Values */
  --scroll-offset-micro: 10px;
  --scroll-offset-small: 20px;
  --scroll-offset-normal: 30px;
  --scroll-offset-medium: 50px;
  --scroll-offset-large: 80px;
  --scroll-threshold: 0.1;
  --scroll-threshold-early: 0.05;
  --scroll-threshold-late: 0.3;

  /* Blur Values */
  --blur-none: 0px;
  --blur-micro: 1px;
  --blur-small: 2px;
  --blur-normal: 4px;
  --blur-medium: 8px;
  --blur-large: 12px;
  --blur-xl: 16px;
  --blur-2xl: 24px;
  --blur-3xl: 40px;

  /* =================
     GRADIENT SYSTEM
     ================= */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-text-secondary) 100%);
  --gradient-accent: linear-gradient(45deg, var(--color-primary), var(--color-accent-secondary));
  --gradient-rainbow: linear-gradient(45deg, var(--color-primary), var(--color-accent-secondary), var(--color-accent-tertiary));
  --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-secondary) 50%, var(--color-primary-dark) 100%);
  --gradient-glass: linear-gradient(135deg, var(--color-white-alpha-soft) 0%, var(--color-white-alpha-light) 100%);
  --gradient-overlay-dark: linear-gradient(135deg, var(--color-black-alpha-moderate) 0%, var(--color-black-alpha-strong) 100%);
  --gradient-overlay-light: linear-gradient(135deg, var(--color-white-alpha-moderate) 0%, var(--color-white-alpha-strong) 100%);

  /* =================
     TYPOGRAPHY SYSTEM
     ================= */
  --typography-font-body-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --typography-font-body-size: 16px;
  --typography-font-body-weight: 400;
  --typography-font-body-line-height: 1.6;
  --typography-font-body-letter-spacing: normal;

  --typography-font-headings-family: var(--typography-font-body-family);
  --typography-font-headings-weight: 700;
  --typography-font-headings-line-height: 1.2;
  --typography-font-headings-letter-spacing: normal;
  --typography-font-headings-text-transform: none;

  /* Heading Sizes */
  --typography-font-headings-size-h1: clamp(2.5rem, 5vw, 4rem);
  --typography-font-headings-size-h2: clamp(2rem, 4vw, 3rem);
  --typography-font-headings-size-h3: clamp(1.75rem, 3vw, 2.5rem);
  --typography-font-headings-size-h4: clamp(1.5rem, 2.5vw, 2rem);
  --typography-font-headings-size-h5: clamp(1.25rem, 2vw, 1.5rem);
  --typography-font-headings-size-h6: clamp(1rem, 1.5vw, 1.25rem);

  /* Enhanced Typography */
  --typography-font-display-size: clamp(3rem, 6vw, 5rem);
  --typography-font-lead-size: clamp(1.125rem, 2vw, 1.5rem);
  --typography-font-caption-size: 0.875rem;
  --typography-font-small-size: 0.75rem;

  /* Responsive Font Sizes */
  --font-size-xs: clamp(0.7rem, 1vw, 0.75rem);
  --font-size-sm: clamp(0.8rem, 1.2vw, 0.875rem);
  --font-size-base: clamp(0.9rem, 1.5vw, 1rem);
  --font-size-lg: clamp(1rem, 2vw, 1.125rem);
  --font-size-xl: clamp(1.125rem, 2.5vw, 1.25rem);
  --font-size-2xl: clamp(1.25rem, 3vw, 1.5rem);
  --font-size-3xl: clamp(1.5rem, 4vw, 1.875rem);
  --font-size-4xl: clamp(1.875rem, 5vw, 2.25rem);
  --font-size-5xl: clamp(2.25rem, 6vw, 3rem);

  /* =================
     RESPONSIVE SPACING SYSTEM
     ================= */
  --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --spacing-sm: clamp(0.5rem, 1vw, 0.75rem);
  --spacing-md: clamp(0.75rem, 1.5vw, 1rem);
  --spacing-lg: clamp(1rem, 2vw, 1.5rem);
  --spacing-xl: clamp(1.5rem, 3vw, 2rem);
  --spacing-2xl: clamp(2rem, 4vw, 2.5rem);
  --spacing-3xl: clamp(2.5rem, 5vw, 3rem);
  --spacing-4xl: clamp(3rem, 6vw, 4rem);
  --spacing-5xl: clamp(4rem, 8vw, 5rem);

  /* =================
     ENHANCED BORDER RADIUS SYSTEM
     ================= */
  --border-radius-none: 0;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-3xl: 32px;
  --border-radius-full: 9999px;

  /* =================
     ENHANCED SHADOW SYSTEM
     ================= */
  --shadow-xs: 0 1px 2px var(--color-black-alpha-light);
  --shadow-sm: 0 1px 3px var(--color-black-alpha-soft), 0 1px 2px var(--color-black-alpha-light);
  --shadow-md: 0 4px 6px var(--color-black-alpha-soft), 0 2px 4px var(--color-black-alpha-light);
  --shadow-lg: 0 10px 15px var(--color-black-alpha-soft), 0 4px 6px var(--color-black-alpha-light);
  --shadow-xl: 0 20px 25px var(--color-black-alpha-soft), 0 10px 10px var(--color-black-alpha-light);
  --shadow-2xl: 0 25px 50px var(--color-black-alpha-visible);
  --shadow-inner: inset 0 2px 4px 0 var(--color-black-alpha-light);
  --shadow-glow: 0 0 20px var(--color-primary-alpha-moderate);
  --shadow-glow-strong: 0 0 40px var(--color-primary-alpha-strong);

  /* =================
     Z-INDEX SCALE
     ================= */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-lightbox: 1100;
  --z-maximum: 2147483647;

  /* =================
     INTERACTIVE FEATURES
     ================= */
  /* Hover & Interaction */
  --interactive-scale: var(--scale-normal);
  --interactive-translate: var(--translate-normal);
  --interactive-shadow: var(--shadow-lg);
  --interactive-blur: var(--blur-normal);

  /* Focus Ring */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-primary);
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

  /* =================
     BREAKPOINT SYSTEM
     ================= */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1440px;
  --breakpoint-3xl: 1600px;

  /* Container Max Widths */
  --container-xs: 100%;
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;
  --container-max: var(--container-xl);

  /* =================
     SECTION-SPECIFIC VARIABLES
     ================= */
  --section-max-width: var(--container-max);
  --section-padding: var(--spacing-3xl);
  --section-gap: var(--spacing-2xl);

  /* =================
     COMPONENT SPECIFIC
     ================= */
  /* Header */
  --header-height: 80px;
  --header-height-mobile: 70px;
  --header-overlay-opacity: var(--opacity-prominent);

  /* Hero */
  --hero-min-height: 100vh;
  --hero-content-max-width: 800px;

  /* Footer */
  --footer-padding: var(--spacing-3xl);

  /* Cards */
  --card-padding: var(--spacing-xl);
  --card-gap: var(--spacing-lg);
  --card-border-radius: var(--border-radius-lg);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-xl);

  /* Buttons */
  --button-padding-x: var(--spacing-lg);
  --button-padding-y: var(--spacing-sm);
  --button-border-radius: var(--border-radius-md);
  --button-transition: all var(--duration-normal) var(--ease-out);

  /* Forms */
  --form-element-height: 44px;
  --form-element-padding: var(--spacing-md);
  --form-element-border-radius: var(--border-radius-sm);

  /* =================
     ACCESSIBILITY FEATURES
     ================= */
  --touch-target-min: 44px;
  --high-contrast-border: 2px solid currentColor;

  /* Motion Preferences */
  --motion-safe: var(--duration-normal);
  --motion-reduce: var(--duration-instant);
}

/* =================
   RESPONSIVE DESIGN ADJUSTMENTS
   ================= */
@media (max-width: 768px) {
  :root {
    /* Mobile spacing adjustments */
    --spacing-3xl: clamp(1.5rem, 4vw, 2rem);
    --spacing-4xl: clamp(2rem, 5vw, 2.5rem);
    --spacing-5xl: clamp(2.5rem, 6vw, 3rem);

    /* Mobile typography adjustments */
    --typography-font-headings-size-h1: clamp(2rem, 5vw, 2.5rem);
    --typography-font-headings-size-h2: clamp(1.75rem, 4vw, 2rem);
    --typography-font-headings-size-h3: clamp(1.5rem, 3vw, 1.75rem);

    /* Mobile interaction adjustments */
    --interactive-scale: var(--scale-small);
    --interactive-translate: var(--translate-small);

    /* Mobile animation adjustments */
    --scroll-offset-normal: var(--scroll-offset-small);
    --stagger-base: var(--stagger-fast);
  }
}

@media (max-width: 480px) {
  :root {
    /* Small mobile adjustments */
    --spacing-lg: var(--spacing-md);
    --spacing-xl: var(--spacing-lg);
    --card-padding: var(--spacing-lg);
    --section-padding: var(--spacing-2xl);
  }
}

/* =================
   ACCESSIBILITY MEDIA QUERIES
   ================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* Disable all animations for users who prefer reduced motion */
    --duration-micro: var(--motion-reduce);
    --duration-fast: var(--motion-reduce);
    --duration-normal: var(--motion-reduce);
    --duration-slow: var(--motion-reduce);
    --duration-slower: var(--motion-reduce);
    --duration-slowest: var(--motion-reduce);
    --duration-ultra-slow: var(--motion-reduce);
    --duration-glacial: var(--motion-reduce);

    /* Reset transform values */
    --interactive-scale: var(--scale-none);
    --interactive-translate: 0px;
    --scroll-offset-normal: 0px;
    --scroll-offset-medium: 0px;
    --scroll-offset-large: 0px;

    /* Reset stagger */
    --stagger-base: 0s;
    --stagger-fast: 0s;
    --stagger-slow: 0s;
  }
}

@media (prefers-contrast: high) {
  :root {
    /* High contrast adjustments */
    --color-text-tertiary: #a0aec0;
    --color-headings: #ffffff;
    --color-border: #4a5568;
    --color-border-light: #2d3748;
    --color-border-dark: #1a202c;

    /* Dark mode shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
  }
}

/* =================
   PRINT STYLES
   ================= */
@media print {
  :root {
    /* Print-specific adjustments */
    --color-text-primary: #000000;
    --color-text-secondary: #000000;
    --color-headings: #000000;
    --color-background-primary: #ffffff;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;

    /* Disable animations for print */
    --duration-fast: var(--motion-reduce);
    --duration-normal: var(--motion-reduce);
    --duration-slow: var(--motion-reduce);
  }
}-text-primary: #000000;
    --color-text-secondary: #000000;
    --color-background-primary: #ffffff;
    --color-border: #000000;
    --focus-ring-width: 3px;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: var(--high-contrast-border);
  }
}

/* =================
   DARK MODE SUPPORT
   ================= */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode color adjustments */
    --color-background-primary: #1a202c;
    --color-background-secondary: #2d3748;
    --color-background-tertiary: #4a5568;
    --color-background-light: #2d3748;
    --color-background-dark: #0f1419;
    --color-text-primary: #f7fafc;
    --color-text-secondary: #e2e8f0;
    --color-text-tertiary: #a0aec0;
    --color-text-muted: #718096;
    --color-headings: #ffffff;
    --color-border: #4a5568;
    --color-border-light: #2d3748;
    --color-border-dark: #1a202c;

    /* Dark mode alpha colors */
    --color-white-alpha-subtle: rgba(255, 255, 255, var(--opacity-subtle));
    --color-white-alpha-light: rgba(255, 255, 255, var(--opacity-light));
    --color-white-alpha-soft: rgba(255, 255, 255, var(--opacity-soft));
    --color-white-alpha-medium: rgba(255, 255, 255, var(--opacity-medium));
    --color-white-alpha-visible: rgba(255, 255, 255, var(--opacity-visible));
    --color-white-alpha-moderate: rgba(255, 255, 255, var(--opacity-moderate));
    --color-white-alpha-strong: rgba(255, 255, 255, var(--opacity-strong));

    --color-black-alpha-subtle: rgba(0, 0, 0, var(--opacity-heavy));
    --color-black-alpha-light: rgba(0, 0, 0, var(--opacity-opaque));
    --color-black-alpha-soft: rgba(0, 0, 0, var(--opacity-near-solid));
    --color-black-alpha-medium: rgba(0, 0, 0, var(--opacity-solid));

    /* Dark mode gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --gradient-glass: linear-gradient(135deg, var(--color-white-alpha-light) 0%, var(--color-white-alpha-subtle) 100%);
    --gradient-overlay-dark: linear-gradient(135deg, var(--color-black-alpha-strong) 0%, var(--color-black-alpha-heavy) 100%);

    /* Dark mode shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--color-primary-alpha-moderate);
    --shadow-glow-strong: 0 0 40px var(--color-primary-alpha-strong);
  }
}

/* =================
   PRINT STYLES
   ================= */
@media print {
  :root {
    /* Print-specific adjustments */
    --color-text-primary: #000000;
    --color-text-secondary: #000000;
    --color-headings: #000000;
    --color-background-primary: #ffffff;
    --color-background-secondary: #ffffff;
    --color-background-tertiary: #ffffff;
    --color-background-light: #ffffff;

    /* Remove shadows for print */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
    --shadow-glow: none;
    --shadow-glow-strong: none;

    /* Disable animations for print */
    --duration-micro: var(--motion-reduce);
    --duration-fast: var(--motion-reduce);
    --duration-normal: var(--motion-reduce);
    --duration-slow: var(--motion-reduce);
    --duration-slower: var(--motion-reduce);
    --duration-slowest: var(--motion-reduce);
    --duration-ultra-slow: var(--motion-reduce);
    --duration-glacial: var(--motion-reduce);

    /* Reset transforms for print */
    --scale-micro: 1;
    --scale-small: 1;
    --scale-normal: 1;
    --scale-medium: 1;
    --translate-micro: 0px;
    --translate-small: 0px;
    --translate-normal: 0px;
    --translate-medium: 0px;
    --rotate-micro: 0deg;
    --rotate-small: 0deg;
    --rotate-normal: 0deg;
    --rotate-medium: 0deg;
  }
}

/* =================
   CONTAINER QUERIES SUPPORT (FUTURE-PROOF)
   ================= */
@container (max-width: 768px) {
  :root {
    --spacing-lg: var(--spacing-md);
    --spacing-xl: var(--spacing-lg);
    --font-size-xl: var(--font-size-lg);
    --font-size-2xl: var(--font-size-xl);
  }
}

@container (max-width: 480px) {
  :root {
    --spacing-md: var(--spacing-sm);
    --spacing-lg: var(--spacing-md);
    --font-size-lg: var(--font-size-base);
    --font-size-xl: var(--font-size-lg);
  }
}

/* =================
   BROWSER-SPECIFIC OPTIMIZATIONS
   ================= */

/* Safari optimizations */
@supports (-webkit-backdrop-filter: blur(1px)) {
  :root {
    --blur-safari-fix: 0.1px; /* Prevents Safari blur artifacts */
  }
}

/* Firefox optimizations */
@-moz-document url-prefix() {
  :root {
    --firefox-scroll-fix: smooth; /* Firefox scroll behavior */
  }
}

/* Edge optimizations */
@supports (-ms-ime-align: auto) {
  :root {
    --edge-grid-fix: 1fr; /* Edge grid fallback */
  }
}

/* =================
   HIGH CONTRAST MODE SUPPORT
   ================= */
@media (prefers-contrast: high) {
  :root {
    /* High contrast color overrides */
    --color-text-primary: #000000;
    --color-text-secondary: #000000;
    --color-text-tertiary: #000000;
    --color-background-primary: #ffffff;
    --color-background-secondary: #ffffff;
    --color-background-tertiary: #ffffff;
    --color-border: #000000;
    --color-border-light: #000000;
    --color-border-dark: #000000;

    /* Enhanced focus indicators */
    --focus-ring-width: 3px;
    --focus-ring-color: #000000;
    --focus-ring-offset: 3px;

    /* Remove subtle effects */
    --shadow-xs: var(--high-contrast-border);
    --shadow-sm: var(--high-contrast-border);
    --shadow-md: var(--high-contrast-border);
    --blur-normal: 0px;
    --blur-medium: 0px;
    --blur-large: 0px;

    /* Ensure sufficient opacity */
    --opacity-light: 1;
    --opacity-soft: 1;
    --opacity-medium: 1;
    --opacity-visible: 1;
  }
}

/* =================
   FORCED COLORS MODE (WINDOWS HIGH CONTRAST)
   ================= */
@media (forced-colors: active) {
  :root {
    /* Use system colors */
    --color-text-primary: CanvasText;
    --color-text-secondary: CanvasText;
    --color-background-primary: Canvas;
    --color-background-secondary: Canvas;
    --color-primary: Highlight;
    --color-border: CanvasText;
    --focus-ring-color: Highlight;

    /* Disable custom shadows and effects */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
    --blur-normal: 0px;
    --blur-medium: 0px;
    --blur-large: 0px;
  }
}

/* =================
   PERFORMANCE OPTIMIZATION VARIABLES
   ================= */
:root {
  /* GPU acceleration hints */
  --gpu-acceleration: translateZ(0);
  --backface-visibility: hidden;
  --transform-style: preserve-3d;

  /* Layout containment */
  --contain-layout: layout;
  --contain-style: style;
  --contain-paint: paint;
  --contain-size: size;
  --contain-all: layout style paint size;

  /* Will-change optimization */
  --will-change-transform: transform;
  --will-change-opacity: opacity;
  --will-change-scroll: scroll-position;
  --will-change-auto: auto;

  /* Font rendering */
  --font-smooth-webkit: antialiased;
  --font-smooth-moz: grayscale;
  --font-display: swap;
  --font-feature-settings: normal;

  /* Scroll behavior */
  --scroll-behavior: smooth;
  --scroll-snap-type: y mandatory;
  --scroll-snap-align: start;
  --scroll-padding: var(--header-height, 80px);
}

/* =================
   CUSTOM PROPERTIES FOR COMPONENTS
   ================= */

/* Specific component overrides */
:root {
  /* Media grid system (from original) */
  --media-grid-gap-xs: 0.5rem;
  --media-grid-gap-sm: 0.75rem;
  --media-grid-gap-md: 1rem;
  --media-grid-gap-lg: 1.5rem;
  --media-grid-gap-xl: 2rem;

  --media-item-min-width: 250px;
  --media-item-aspect-ratio: 1;
  --media-item-border-radius: var(--border-radius);

  --media-grid-columns-mobile: 1;
  --media-grid-columns-tablet: 2;
  --media-grid-columns-desktop: 4;
  --media-grid-columns-wide: 6;

  /* Photo grid specific */
  --photo-grid-min-width: 200px;
  --video-grid-min-width: 280px;
  --product-grid-min-width: 250px;
  --text-grid-min-width: 300px;

  /* Aspect ratios */
  --photo-aspect-ratio: 4/3;
  --video-aspect-ratio: 16/9;
  --product-aspect-ratio: 1;
  --text-aspect-ratio: auto;

  /* Interactive features (from original) */
  --media-hover-scale: var(--scale-normal);
  --media-transition: var(--transition-normal);
  --media-hover-shadow: var(--shadow-lg);

  /* Overlay system */
  --media-overlay-bg: var(--color-black-alpha-strong);
  --media-overlay-transition: var(--transition-normal);

  /* Modal & lightbox */
  --modal-backdrop: var(--color-black-alpha-opaque);
  --modal-blur: var(--blur-normal);
  --modal-scale-in: var(--scale-down-normal);
  --modal-scale-out: var(--scale-none);

  /* Preview system */
  --preview-size: 320px;
  --preview-offset: var(--spacing-md);
  --preview-shadow: var(--shadow-xl);

  /* Touch & gesture */
  --touch-target-min: 44px;
  --swipe-threshold: 50px;
  --pinch-threshold: 1.2;

  /* Loading states */
  --loading-color: var(--color-primary);
  --loading-bg: var(--color-white-alpha-opaque);

  /* Content layout variables (from original) */
  --about-us-content-max-width: 65ch;
  --about-us-media-aspect-ratio: 16/9;
  --about-us-image-aspect-ratio: 4/3;

  /* Header specific (from original) */
  --color-text-primary-inverted: var(--color-text-inverted);
  --color-header-overlay-opacity: var(--opacity-prominent);

  /* WhatsApp integration (from original) */
  --whatsapp-color: #25D366;
  --whatsapp-color-hover: #1DA851;
  --whatsapp-emoji: "💬";
}

/* =================
   ANIMATION KEYFRAMES DEFINITIONS
   ================= */

/* Import keyframes from animation framework */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--scroll-offset-normal));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(calc(-1 * var(--scroll-offset-normal)));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(var(--scroll-offset-normal));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(var(--scale-down-normal));
    }
    to {
        opacity: 1;
        transform: scale(var(--scale-none));
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(calc(-1 * var(--rotate-medium))) scale(var(--scale-down-small));
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(var(--scale-none));
    }
}

/* =================
   VALIDATION & DEBUG
   ================= */

/* CSS validation helpers */
:root {
  /* Ensure all required variables are defined */
  --_validation-primary: var(--color-primary, #007bff);
  --_validation-duration: var(--duration-normal, 300ms);
  --_validation-spacing: var(--spacing-md, 1rem);
  --_validation-font: var(--typography-font-body-size, 16px);
  --_validation-radius: var(--border-radius, 8px);
  --_validation-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1));

  /* Debug mode indicator */
  --debug-color: #ff0000;
  --debug-bg: rgba(255, 0, 0, 0.1);
  --debug-border: 2px solid var(--debug-color);
}

/* Debug styles (activated when .debug class is present) */
.debug :root {
  --color-background-primary: var(--debug-bg) !important;
}

.debug * {
  outline: 1px solid var(--debug-color) !important;
}

/* =================
   ENVIRONMENT DETECTION
   ================= */

/* Detect if CSS custom properties are supported */
@supports (--custom: property) {
  .no-custom-properties {
    display: none;
  }
}

@supports not (--custom: property) {
  .requires-custom-properties {
    display: none;
  }

  .no-custom-properties {
    display: block;
  }
}

/* Detect if CSS Grid is supported */
@supports (display: grid) {
  .no-grid {
    display: none;
  }
}

@supports not (display: grid) {
  .requires-grid {
    display: none;
  }

  .no-grid {
    display: block;
  }
}

/* =================
   FALLBACKS FOR OLDER BROWSERS
   ================= */

/* Fallback values for browsers without custom property support */
.no-custom-properties * {
  /* Fallback colors */
  color: #333;
  background-color: #ffffff;
  border-color: #ddd;

  /* Fallback spacing */
  margin: 1rem;
  padding: 1rem;

  /* Fallback typography */
  font-size: 16px;
  line-height: 1.6;

  /* Fallback borders */
  border-radius: 8px;

  /* Fallback transitions */
  transition: all 300ms ease;
}

/* =================
   FUTURE-PROOF ADDITIONS
   ================= */

/* CSS Logical Properties support */
@supports (margin-inline-start: 0) {
  :root {
    --margin-inline-start: margin-inline-start;
    --margin-inline-end: margin-inline-end;
    --padding-inline-start: padding-inline-start;
    --padding-inline-end: padding-inline-end;
  }
}

/* Container Queries future support */
@supports (container-type: inline-size) {
  :root {
    --container-query-support: true;
  }
}

/* Subgrid support detection */
@supports (grid-template-rows: subgrid) {
  :root {
    --subgrid-support: true;
  }
}

/* Color functions support */
@supports (color: color(display-p3 1 0 0)) {
  :root {
    --wide-gamut-support: true;
    --color-primary-p3: color(display-p3 0 0.48 1);
  }
}

/* =================
   END OF VARIABLES
   ================= */

/* Validation comment - ensures file loaded completely */
/* CSS Variables System v2.0 - Complete ✓ */