/* ==========================================================================
   INKA WAYS TRAVEL CONSULTANTS — SISTEMA DE DISEÑO & VARIABLES
   Tema Claro Editorial: Fondo Blanco de Lujo, Carbón Andino, Oro y Esmeralda
   ========================================================================== */

:root {
  /* --- Paleta de Colores de Fondo (Tema Claro / Blanco) --- */
  --color-bg-dark: #FFFFFF;          /* Fondo principal blanco puro */
  --color-bg-surface: #FFFFFF;       /* Superficie clara para tarjetas y paneles */
  --color-bg-surface-elevated: #F8FAF9; /* Superficie suave con matiz andino */
  --color-bg-light: #FFFFFF;        /* Blanco */
  --color-bg-light-muted: #F3F5F4;  /* Tono arena suave */

  /* Colores de Acento & Identidad */
  --color-emerald-primary: #15803D;  /* Verde naturaleza andina */
  --color-emerald-accent: #16A34A;   /* Verde esmeralda vivo para acentos */
  --color-emerald-glow: rgba(22, 163, 74, 0.2);
  --color-gold-subtle: #B8860B;      /* Dorado incaico elegante */
  --color-gold-light: #D4AF37;       /* Brillo dorado */
  --color-terracotta: #C86D51;       /* Tono tierra / cerámica andina */

  /* Textos & Tipografía de Alta Legibilidad sobre Blanco */
  --color-text-light: #111816;       /* Carbón profundo para títulos principales */
  --color-text-muted: #4A5550;       /* Gris carbón medio para párrafos y lectura */
  --color-text-dim: #717A76;         /* Texto tenue para números y decoraciones */
  --color-text-dark: #111816;        /* Texto oscuro */
  --color-text-dark-muted: #4A5550;  /* Texto secundario */
  --color-text-white: #FFFFFF;       /* Blanco puro para capas sobre fotos/video */

  /* Bordes & Divisores */
  --color-border-subtle: rgba(18, 23, 21, 0.08);
  --color-border-hover: rgba(184, 134, 11, 0.4);
  --color-border-emerald: rgba(22, 163, 74, 0.3);

  /* Gradientes Cinematográficos */
  --gradient-hero-overlay: linear-gradient(180deg, rgba(11, 14, 13, 0.6) 0%, rgba(11, 14, 13, 0.3) 45%, rgba(11, 14, 13, 0.9) 100%);
  --gradient-surface: linear-gradient(135deg, #FFFFFF 0%, #F8FAF9 100%);
  --gradient-gold: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 50%, #AA8010 100%);
  --gradient-emerald: linear-gradient(135deg, #22C55E 0%, #15803D 100%);

  /* --- Tipografía --- */
  --font-serif-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-serif-editorial: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tamaños de Fuente Fluidos */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --text-4xl: clamp(3rem, 2.2rem + 3.8vw, 5.5rem);
  --text-hero: clamp(3.2rem, 2.5rem + 5vw, 7.5rem);

  /* --- Espaciado & Layout --- */
  --container-max-width: 1360px;
  --container-narrow-width: 960px;
  --section-padding-y: clamp(5rem, 8vw, 8.5rem);
  --section-padding-x: clamp(1.25rem, 4vw, 3.5rem);

  /* --- Sombras Suaves y Elegantes para Fondo Claro --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.1);
  --shadow-glow-emerald: 0 0 25px rgba(22, 163, 74, 0.18);
  --shadow-glow-gold: 0 0 25px rgba(184, 134, 11, 0.18);

  /* --- Curvas de Transición Suaves --- */
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.25s var(--ease-smooth);
  --transition-normal: 0.45s var(--ease-smooth);
  --transition-slow: 0.85s var(--ease-smooth);

  /* --- Bordes Redondeados --- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* --- Header & Navegación --- */
  --header-height: 90px;
  --header-height-scrolled: 74px;

  /* --- Safe Areas para Dispositivos Móviles (iPhone notch, Dynamic Island, Android navigation bar) --- */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}