/* ============================================
   MAKA DEFENSA - Design System Variables
   ============================================ */

:root {
  /* --- Color Palette --- */
  --negro-profundo: #0A0E1A;
  --navy-oscuro: #0D1528;
  --navy-medio: #131D35;
  --gris-borde: #1E2A45;
  --azul-primario: #2B7CC1;
  --azul-electrico: #00A8FF;
  --azul-cielo: #4FC3F7;
  --blanco: #FFFFFF;
  --gris-texto: #8A9BB5;
  --gris-claro: #CBD5E1;
  --verde-exito: #00E676;
  --rojo-error: #FF5252;

  /* --- Gradients --- */
  --gradiente-tech: linear-gradient(135deg, #0A0E1A 0%, #0D2847 100%);
  --gradiente-cta: linear-gradient(135deg, #2B7CC1 0%, #00A8FF 100%);
  --gradiente-hero-overlay: linear-gradient(180deg, rgba(10, 14, 26, 0.85) 0%, rgba(10, 14, 26, 0.6) 50%, rgba(10, 14, 26, 0.9) 100%);
  --gradiente-card: linear-gradient(180deg, rgba(19, 29, 53, 0.8) 0%, rgba(13, 21, 40, 0.9) 100%);

  /* --- Glow Effects --- */
  --glow-azul: 0 0 20px rgba(0, 168, 255, 0.3);
  --glow-azul-fuerte: 0 0 30px rgba(0, 168, 255, 0.5);
  --glow-boton: 0 4px 15px rgba(0, 168, 255, 0.4);

  /* --- Typography --- */
  --font-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes (fluid) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* Letter Spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;
  --ls-widest: 0.2em;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --max-width: 1280px;
  --max-width-narrow: 960px;
  --max-width-wide: 1440px;
  --header-height: 80px;
  --container-padding: 1.5rem;

  /* --- Borders --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --border-thin: 1px solid var(--gris-borde);
  --border-glow: 1px solid rgba(0, 168, 255, 0.3);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-smooth: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-Index Scale --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-whatsapp: 600;
  --z-tooltip: 700;

  /* --- Semantic Variables (for theme switching) --- */
  --overlay-heavy: rgba(10, 14, 26, 0.85);
  --overlay-medium: rgba(10, 14, 26, 0.7);
  --overlay-light: rgba(10, 14, 26, 0.6);
  --overlay-max: rgba(10, 14, 26, 0.95);
  --header-bg: rgba(10, 14, 26, 0.85);
  --header-border: rgba(30, 42, 69, 0.5);
  --mobile-panel-bg: rgba(10, 14, 26, 0.98);
  --accent-bg: rgba(0, 168, 255, 0.08);
  --accent-bg-hover: rgba(0, 168, 255, 0.05);
  --accent-border: rgba(0, 168, 255, 0.2);
  --accent-border-hover: rgba(0, 168, 255, 0.3);
  --accent-border-subtle: rgba(0, 168, 255, 0.15);
  --accent-grid: rgba(0, 168, 255, 0.04);
  --accent-grid-subtle: rgba(0, 168, 255, 0.03);
  --accent-scanline: rgba(0, 168, 255, 0.15);
  --accent-focus-ring: rgba(0, 168, 255, 0.15);
  --accent-glow-10: rgba(0, 168, 255, 0.1);
  --card-surface: rgba(19, 29, 53, 0.8);
  --card-surface-alt: rgba(13, 21, 40, 0.5);
  --gallery-overlay: rgba(10, 14, 26, 0.6);
  --btn-outline-border: rgba(255, 255, 255, 0.3);
  --cta-bg: linear-gradient(135deg, #0D2847 0%, #1a3a6c 50%, #0D2847 100%);
  --cta-grid-opacity: rgba(0, 168, 255, 0.05);
  --selection-bg: rgba(0, 168, 255, 0.3);
  --img-filter: brightness(0.8) saturate(0.85);
  --img-filter-hero: brightness(0.3) saturate(0.7);
  --map-filter: brightness(0.8) contrast(1.1) saturate(0);
  --scrollbar-thumb: var(--gris-borde);
  --scrollbar-thumb-hover: var(--azul-primario);
  --logo-filter: brightness(0) invert(1);
  --success-bg: rgba(0, 230, 118, 0.08);
  --success-border: rgba(0, 230, 118, 0.2);
  --accent-gradient-overlay: linear-gradient(135deg, rgba(0, 168, 255, 0.1) 0%, transparent 60%);
}

/* ============================================
   LIGHT MODE
   ============================================ */
[data-theme="light"] {
  /* Inverted colors */
  --negro-profundo: #F4F6FA;
  --navy-oscuro: #E8ECF2;
  --navy-medio: #FFFFFF;
  --gris-borde: #D1D9E6;
  --azul-primario: #2268A8;
  --azul-electrico: #0078D4;
  --azul-cielo: #0062B1;
  --blanco: #0F1729;
  --gris-texto: #5A6A82;
  --gris-claro: #3A4A60;
  --verde-exito: #00A85A;
  --rojo-error: #D32F2F;

  /* Gradients */
  --gradiente-tech: linear-gradient(135deg, #F4F6FA 0%, #E0E8F5 100%);
  --gradiente-cta: linear-gradient(135deg, #2268A8 0%, #0078D4 100%);
  --gradiente-hero-overlay: linear-gradient(180deg, rgba(244,246,250,0.85) 0%, rgba(244,246,250,0.5) 50%, rgba(244,246,250,0.9) 100%);
  --gradiente-card: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(240,243,248,0.95) 100%);

  /* Glows (more subtle in light mode) */
  --glow-azul: 0 2px 12px rgba(0, 120, 212, 0.12);
  --glow-azul-fuerte: 0 4px 20px rgba(0, 120, 212, 0.2);
  --glow-boton: 0 4px 15px rgba(0, 120, 212, 0.18);

  /* Semantic variables - light versions */
  --overlay-heavy: rgba(244, 246, 250, 0.9);
  --overlay-medium: rgba(244, 246, 250, 0.75);
  --overlay-light: rgba(244, 246, 250, 0.6);
  --overlay-max: rgba(244, 246, 250, 0.97);
  --header-bg: rgba(255, 255, 255, 0.95);
  --header-border: rgba(209, 217, 230, 0.8);
  --mobile-panel-bg: rgba(255, 255, 255, 0.98);
  --accent-bg: rgba(0, 120, 212, 0.06);
  --accent-bg-hover: rgba(0, 120, 212, 0.04);
  --accent-border: rgba(0, 120, 212, 0.2);
  --accent-border-hover: rgba(0, 120, 212, 0.35);
  --accent-border-subtle: rgba(0, 120, 212, 0.12);
  --accent-grid: rgba(0, 120, 212, 0.06);
  --accent-grid-subtle: rgba(0, 120, 212, 0.04);
  --accent-scanline: rgba(0, 120, 212, 0.08);
  --accent-focus-ring: rgba(0, 120, 212, 0.2);
  --accent-glow-10: rgba(0, 120, 212, 0.08);
  --card-surface: rgba(255, 255, 255, 0.9);
  --card-surface-alt: rgba(240, 243, 248, 0.7);
  --gallery-overlay: rgba(255, 255, 255, 0.5);
  --btn-outline-border: rgba(15, 23, 41, 0.2);
  --cta-bg: linear-gradient(135deg, #E8F4FF 0%, #D0E8FF 50%, #E8F4FF 100%);
  --cta-grid-opacity: rgba(0, 120, 212, 0.06);
  --selection-bg: rgba(0, 120, 212, 0.2);
  --img-filter: brightness(1) saturate(1);
  --img-filter-hero: brightness(0.85) saturate(0.9);
  --map-filter: brightness(1) contrast(1) saturate(0.3);
  --scrollbar-thumb: #D1D9E6;
  --scrollbar-thumb-hover: #2268A8;
  --logo-filter: none;
  --success-bg: rgba(0, 168, 90, 0.06);
  --success-border: rgba(0, 168, 90, 0.2);
  --accent-gradient-overlay: linear-gradient(135deg, rgba(0, 120, 212, 0.08) 0%, transparent 60%);
}