/*
 * EcuaSports - Global Design System
 * Version: 1.0.0
 * Compatible with: WordPress 6.9.1+, WooCommerce 10.5.0+, Elementor Pro
 */

/* ============================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================ */

:root {
  /* Primary Colors */
  --ecua-black: #000000;
  --ecua-white: #FFFFFF;
  --ecua-dark: #0a0a0a;
  --ecua-light: #f8f9fa;
  
  /* Accent Colors (Logo Based) */
  --ecua-yellow: #FFD700;
  --ecua-yellow-light: #FFF3B0;
  --ecua-yellow-dark: #B8860B;
  
  --ecua-blue: #0066CC;
  --ecua-blue-light: #4D94FF;
  --ecua-blue-dark: #004C99;
  
  --ecua-red: #E31837;
  --ecua-red-light: #FF4D6A;
  --ecua-red-dark: #B01030;
  
  /* Neutral Grays */
  --ecua-gray-100: #f7f7f7;
  --ecua-gray-200: #e9ecef;
  --ecua-gray-300: #dee2e6;
  --ecua-gray-400: #ced4da;
  --ecua-gray-500: #adb5bd;
  --ecua-gray-600: #6c757d;
  --ecua-gray-700: #495057;
  --ecua-gray-800: #343a40;
  --ecua-gray-900: #212529;
  
  /* Gradients */
  --ecua-gradient-brand: linear-gradient(135deg, var(--ecua-yellow) 0%, var(--ecua-red) 50%, var(--ecua-blue) 100%);
  --ecua-gradient-dark: linear-gradient(180deg, var(--ecua-black) 0%, var(--ecua-gray-900) 100%);
  --ecua-gradient-glow: radial-gradient(circle, var(--ecua-yellow) 0%, transparent 70%);
  
  /* Typography */
  --ecua-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ecua-font-display: 'Outfit', 'Inter', sans-serif;
  
  /* Font Sizes (Fluid Typography) */
  --ecua-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --ecua-text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --ecua-text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --ecua-text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --ecua-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --ecua-text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --ecua-text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --ecua-text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
  --ecua-text-5xl: clamp(3rem, 2rem + 5vw, 4.5rem);
  --ecua-text-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 6rem);
  
  /* Font Weights */
  --ecua-font-light: 300;
  --ecua-font-normal: 400;
  --ecua-font-medium: 500;
  --ecua-font-semibold: 600;
  --ecua-font-bold: 700;
  --ecua-font-extrabold: 800;
  
  /* Spacing Scale */
  --ecua-space-1: 0.25rem;
  --ecua-space-2: 0.5rem;
  --ecua-space-3: 0.75rem;
  --ecua-space-4: 1rem;
  --ecua-space-6: 1.5rem;
  --ecua-space-8: 2rem;
  --ecua-space-10: 2.5rem;
  --ecua-space-12: 3rem;
  --ecua-space-16: 4rem;
  --ecua-space-20: 5rem;
  --ecua-space-24: 6rem;
  
  /* Border Radius */
  --ecua-radius-sm: 0.25rem;
  --ecua-radius-md: 0.5rem;
  --ecua-radius-lg: 0.75rem;
  --ecua-radius-xl: 1rem;
  --ecua-radius-2xl: 1.5rem;
  --ecua-radius-full: 9999px;
  
  /* Shadows */
  --ecua-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ecua-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --ecua-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --ecua-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --ecua-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --ecua-shadow-glow-yellow: 0 0 30px rgba(255, 215, 0, 0.4);
  --ecua-shadow-glow-blue: 0 0 30px rgba(0, 102, 204, 0.4);
  --ecua-shadow-glow-red: 0 0 30px rgba(227, 24, 55, 0.4);
  
  /* Transitions */
  --ecua-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ecua-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ecua-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ecua-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Z-Index Scale */
  --ecua-z-dropdown: 1000;
  --ecua-z-sticky: 1020;
  --ecua-z-fixed: 1030;
  --ecua-z-modal: 1050;
  --ecua-z-tooltip: 1070;
  
  /* Container Widths */
  --ecua-container-xl: 1280px;
  --ecua-container-2xl: 1440px;
}

/* Dark Mode Variables */
[data-theme="dark"], .ecua-dark {
  --ecua-bg-primary: var(--ecua-black);
  --ecua-bg-secondary: var(--ecua-gray-900);
  --ecua-text-primary: var(--ecua-white);
  --ecua-text-secondary: var(--ecua-gray-300);
  --ecua-border-color: var(--ecua-gray-700);
}

[data-theme="light"], .ecua-light {
  --ecua-bg-primary: var(--ecua-white);
  --ecua-bg-secondary: var(--ecua-gray-100);
  --ecua-text-primary: var(--ecua-black);
  --ecua-text-secondary: var(--ecua-gray-700);
  --ecua-border-color: var(--ecua-gray-300);
}

/* Base Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--ecua-font-primary);
  font-size: var(--ecua-text-base);
  line-height: 1.5;
  color: var(--ecua-text-primary, var(--ecua-black));
  background-color: var(--ecua-bg-primary, var(--ecua-white));
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ecua-font-display);
  font-weight: var(--ecua-font-bold);
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0;
}

h1 { font-size: var(--ecua-text-5xl); }
h2 { font-size: var(--ecua-text-4xl); }
h3 { font-size: var(--ecua-text-3xl); }
h4 { font-size: var(--ecua-text-2xl); }
h5 { font-size: var(--ecua-text-xl); }
h6 { font-size: var(--ecua-text-lg); }

.ecua-display-1 {
  font-size: var(--ecua-text-6xl);
  font-weight: var(--ecua-font-extrabold);
  letter-spacing: -0.05em;
}

.ecua-text-gradient {
  background: var(--ecua-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}