/* ============================================
   GRANMASTER - VARIABLES CSS GLOBALES
   Design System - Cambios aquí = Todo el sitio
   ============================================ */

html { color-scheme: dark; }
:root {
  /* 🎨 Paleta de Colores - Pistache Professional */
  --color-primary: #98C379;
  --color-primary-dark: #7D9B5D;
  --color-primary-light: #B8D9A6;
  --color-primary-glow: rgba(152, 195, 121, 0.3);
  
  --color-secondary: #61AFEF;
  --color-secondary-dark: #4A94C9;
  --color-accent: #C678DD;
  
  /* 🌑 Fondos - Tema Oscuro */
  --bg-primary: #0A0A0A;
  --bg-secondary: #121212;
  --bg-card: #1A1A1A;
  --bg-card-hover: #242424;
  --bg-overlay: rgba(10, 10, 10, 0.8);
  
  /* 📝 Texto */
  --text-primary: #FFFFFF;
  --text-secondary: #B0B0B0;
  --text-muted: #6B6B6B;
  --text-inverse: #0A0A0A;
  
  /* ⚠️ Estados */
  --color-success: #4CAF50;
  --color-warning: #FFC107;
  --color-error: #F44336;
  --color-info: #2196F3;
  
  /* 🌈 Gradientes */
  --gradient-primary: linear-gradient(135deg, #98C379 0%, #7D9B5D 100%);
  --gradient-secondary: linear-gradient(135deg, #61AFEF 0%, #4A94C9 100%);
  --gradient-hero: linear-gradient(135deg, rgba(152, 195, 121, 0.1) 0%, rgba(10, 10, 10, 0) 100%);
  
  /* 💫 Sombras */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px var(--color-primary-glow);
  
  /* 📐 Bordes */
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 20px;
  --border-color: rgba(152, 195, 121, 0.2);
  --border-color-light: rgba(255, 255, 255, 0.1);
  
  /* 📏 Espaciado */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 3rem;     /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  
  /* 🔤 Tipografía */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  
  /* ⚡ Transiciones */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* 📱 Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1400px;
  
  /* 🎯 Z-Index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}

/* Tema Claro (opcional - futuro) */
.theme-light {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F5;
  --bg-card: #FFFFFF;
  --text-primary: #0A0A0A;
  --text-secondary: #4A4A4A;
}

/* ============================================
   TEMAS - Claro / Medio / Oscuro
   ============================================ */

/* OSCURO (default) */
html[data-theme="dark"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --border-color: #2a2a2a;
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted: #6b6b6b;
  --accent-primary: #2563eb;
  --accent-primary-hover: #1d4ed8;
  --accent-secondary: #f59e0b;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
}

/* MEDIO */
html[data-theme="dim"] {
  --bg-primary: #1a1f2e;
  --bg-secondary: #242938;
  --bg-tertiary: #2e3448;
  --border-color: #3a4058;
  --text-primary: #e8eaf0;
  --text-secondary: #9ba3bc;
  --text-muted: #6b7494;
  --accent-primary: #4f8ef7;
  --accent-primary-hover: #3d7ae5;
  --accent-secondary: #f59e0b;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
}

/* CLARO */
html[data-theme="light"] {
  --bg-primary: #c8e6b8;
  --bg-secondary: #d4edcb;
  --bg-tertiary: #b8d9a6;
  --border-color: #b8d9a6;
  --text-primary: #1a2e0f;
  --text-secondary: #3d5c2a;
  --text-muted: #6b8f58;
  --accent-primary: #2563eb;
  --accent-primary-hover: #1d4ed8;
  --accent-secondary: #d97706;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
}

/* ============================================
   TEMAS - Claro / Medio / Oscuro
   ============================================ */

/* Fix contraste tema pistache */
html[data-theme="light"] .hero-title,
html[data-theme="light"] .hero-subtitle {
  background: linear-gradient(135deg, #1a2e0f 0%, #3d5c2a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="light"] .hero-description {
  color: #3d5c2a !important;
}
html[data-theme="light"] .header {
  background: rgba(232, 245, 225, 0.95) !important;
  border-bottom: 1px solid #b8d9a6;
}
html[data-theme="light"] .btn-outline {
  border-color: #1a2e0f !important;
  color: #1a2e0f !important;
}
html[data-theme="light"] .nav-desktop a {
  color: #1a2e0f !important;
}
html[data-theme="light"] .logo span {
  color: #1a2e0f !important;
}

/* ── FIX GLOBAL: variables faltantes en todos los temas ── */
html[data-theme="light"] {
  --bg-card: #e8f5e0;
  --bg-card-hover: #ddf0d2;
  --bg-overlay: rgba(200, 230, 184, 0.9);
  --color-primary: #3d7a1f;
  --color-primary-dark: #2d5c17;
  --color-primary-light: #5fa032;
  --color-primary-glow: rgba(61, 122, 31, 0.15);
  --border-color: rgba(61, 122, 31, 0.25);
  --border-color-light: rgba(0,0,0,0.08);
  --text-primary: #1a2e0f;
  --text-secondary: #3d5c2a;
  --text-muted: #6b8f58;
  --text-inverse: #ffffff;
  --gradient-primary: linear-gradient(135deg, #3d7a1f 0%, #2d5c17 100%);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);
}

html[data-theme="dim"] {
  --bg-card: #2e3448;
  --bg-card-hover: #363d54;
  --color-primary: #98C379;
  --color-primary-dark: #7D9B5D;
  --color-primary-glow: rgba(152, 195, 121, 0.2);
  --border-color: rgba(152, 195, 121, 0.15);
  --text-primary: #e8eaf0;
  --text-secondary: #9ba3bc;
  --text-muted: #6b7494;
  --gradient-primary: linear-gradient(135deg, #98C379 0%, #7D9B5D 100%);
}

/* ── FIX CONTRASTE PISTACHE: clases específicas del sitio ── */
html[data-theme="light"] .hero-title,
html[data-theme="light"] .hero-subtitle,
html[data-theme="light"] .section-title,
html[data-theme="light"] .section-subtitle,
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3, html[data-theme="light"] h4 {
  color: #1a2e0f !important;
  -webkit-text-fill-color: #1a2e0f !important;
}
html[data-theme="light"] .hero-description,
html[data-theme="light"] p,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .service-card p,
html[data-theme="light"] .text-secondary {
  color: #3d5c2a !important;
}
html[data-theme="light"] .stat-number {
  color: #2d5c17 !important;
}
html[data-theme="light"] .stat-card,
html[data-theme="light"] .service-card {
  background: rgba(255,255,255,0.6) !important;
  border-color: rgba(61,122,31,0.2) !important;
}
html[data-theme="light"] .btn-outline {
  color: #1a2e0f !important;
  border-color: #1a2e0f !important;
}