/* ==========================================================================
   VIBROGENICO THEME V2.0 - CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  
  /* ==========================================================================
     COLORS - Maya-inspired Mystical Palette
     ========================================================================== */
  
  /* Primary Colors */
  --color-mystical-gold: #FFD700;
  --color-jungle-green: #32CD32;
  --color-fire-orange: #FF6347;
  --color-ancient-cream: #FFF8DC;
  --color-deep-night: #0a0a0a;
  
  /* Secondary Colors */
  --color-stone-brown: #8B4513;
  --color-sage-green: #9CAF88;
  --color-sunset-purple: #8B008B;
  --color-earth-red: #CD853F;
  --color-moon-silver: #C0C0C0;
  
  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  
  /* Alpha Variations */
  --color-gold-alpha-10: rgba(255, 215, 0, 0.1);
  --color-gold-alpha-20: rgba(255, 215, 0, 0.2);
  --color-gold-alpha-30: rgba(255, 215, 0, 0.3);
  --color-gold-alpha-50: rgba(255, 215, 0, 0.5);
  --color-black-alpha-30: rgba(0, 0, 0, 0.3);
  --color-black-alpha-50: rgba(0, 0, 0, 0.5);
  --color-black-alpha-70: rgba(0, 0, 0, 0.7);
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  
  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  
  /* Font Families */
  --font-primary: 'Cinzel', Georgia, serif;
  --font-secondary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-monospace: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Font Sizes - Fluid Typography */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
  --font-size-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
  --font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
  --font-size-6xl: clamp(4rem, 3.2rem + 4vw, 6rem);
  
  /* Hero and Section Sizes */
  --font-size-hero: clamp(3rem, 8vw, 6rem);
  --font-size-section: clamp(2.5rem, 6vw, 4rem);
  --font-size-subtitle: clamp(1.25rem, 3vw, 2rem);
  
  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  /* ==========================================================================
     SPACING & LAYOUT
     ========================================================================== */
  
  /* Spacing Scale */
  --spacing-px: 1px;
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */
  --spacing-32: 8rem;     /* 128px */
  --spacing-40: 10rem;    /* 160px */
  
  /* Named Spacing */
  --spacing-xs: var(--spacing-2);
  --spacing-sm: var(--spacing-4);
  --spacing-md: var(--spacing-8);
  --spacing-lg: var(--spacing-16);
  --spacing-xl: var(--spacing-24);
  --spacing-2xl: var(--spacing-32);
  
  /* Layout Dimensions */
  --header-height: 80px;
  --header-height-mobile: 60px;
  --footer-height: 60px;
  --section-min-height: 100vh;
  --content-max-width: 1200px;
  --content-max-width-narrow: 800px;
  --content-max-width-wide: 1400px;
  
  /* Container Padding */
  --container-padding: clamp(1rem, 4vw, 2rem);
  --section-padding-y: clamp(4rem, 8vw, 8rem);
  --section-padding-x: var(--container-padding);
  
  /* ==========================================================================
     BORDERS & RADIUS
     ========================================================================== */
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Border Widths */
  --border-width-0: 0px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  
  /* ==========================================================================
     SHADOWS & EFFECTS
     ========================================================================== */
  
  /* Box Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* Mystical Shadows */
  --shadow-glow-gold: 0 0 20px var(--color-gold-alpha-50);
  --shadow-glow-green: 0 0 20px rgba(50, 205, 50, 0.5);
  --shadow-glow-orange: 0 0 20px rgba(255, 99, 71, 0.5);
  
  /* Text Shadows */
  --text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --text-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5);
  --text-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);
  --text-shadow-glow: 0 0 10px currentColor;
  
  /* ==========================================================================
     ANIMATIONS & TRANSITIONS
     ========================================================================== */
  
  /* Timing 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-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-back-in: cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Transition Durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;
  
  /* Named Transitions */
  --transition-fast: all var(--duration-150) var(--ease-out);
  --transition-smooth: all var(--duration-300) var(--ease-in-out);
  --transition-slow: all var(--duration-500) var(--ease-in-out);
  --transition-very-slow: all var(--duration-1000) var(--ease-in-out);
  
  /* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */
  
  --z-index-negative: -1;
  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal: 400;
  --z-index-popover: 500;
  --z-index-tooltip: 600;
  --z-index-loading: 9999;
  
  /* ==========================================================================
     BREAKPOINTS (for reference in clamp functions)
     ========================================================================== */
  
  --breakpoint-xs: 320px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ==========================================================================
     PERFORMANCE & ACCESSIBILITY
     ========================================================================== */
  
  /* Reduced motion fallbacks */
  --animation-duration: var(--duration-300);
  --scroll-behavior: smooth;
  
  /* Focus styles */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-mystical-gold);
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
  
}

/* ==========================================================================
   MEDIA QUERY ADJUSTMENTS
   ========================================================================== */

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-duration: 0.01ms;
    --scroll-behavior: auto;
    --transition-fast: none;
    --transition-smooth: none;
    --transition-slow: none;
    --transition-very-slow: none;
  }
}

/* High contrast preferences */
@media (prefers-contrast: high) {
  :root {
    --color-mystical-gold: #FFFF00;
    --color-jungle-green: #00FF00;
    --color-fire-orange: #FF4500;
  }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-ancient-cream: #2a2a2a;
    --color-gray-100: #1a1a1a;
    --color-gray-200: #2a2a2a;
  }
}

/* Print styles adjustments */
@media print {
  :root {
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
    --shadow-glow-gold: none;
    --shadow-glow-green: none;
    --shadow-glow-orange: none;
  }
}