/* =============================================================
   AQUA AMAZÓNICA - DESIGN TOKENS
   Extraídos automáticamente del prototipo Figma original.
   No modificar sin actualizar también el archivo design_tokens/tokens.json
   ============================================================= */

:root {
  /* ----------------------------------------------------------
     PALETA DE COLORES PRINCIPAL
     ---------------------------------------------------------- */
  
  /* Color de marca (Primary) */
  --color-primary:           #003A51;  /* Azul marino profundo - color principal de la marca */
  --color-primary-dark:      #001E2C;  /* Variante oscura para hover/active */
  --color-primary-light:     #164E63;  /* Variante clara para estados secundarios */
  --color-primary-soft:      #C4E7FF;  /* Fondo suave azul (chip Destino Top) */

  /* Verdes sostenibilidad (Accent) */
  --color-eco-deep:          #2C694E;  /* Verde profundo - acentos sostenibilidad */
  --color-eco-medium:        #316E52;  /* Verde medio */
  --color-eco-bright:        #16A34A;  /* Verde brillante - CTA eco, certificaciones */
  --color-eco-dark:          #0E5138;  /* Verde muy oscuro */
  --color-eco-soft:          #DCFCE7;  /* Fondo verde muy suave */
  --color-eco-soft-2:        #B1F0CE;  /* Fondo verde suave (chips eco) */
  --color-eco-soft-3:        #AEEECB;  /* Fondo verde suave (chips eco alt) */

  /* Verde lima (Highlight) */
  --color-lime:              #B8F47A;  /* Verde lima - badges "Huella Hídrica Mínima", rating */

  /* Azules acuáticos */
  --color-blue-deep:         #0F3D4F;  /* Azul profundo */
  --color-blue-medium:       #236584;  /* Azul medio */
  --color-blue-accent:       #0369A1;  /* Azul de acento (ríos) */
  --color-blue-sky:          #93CEF2;  /* Celeste claro */

  /* Texto */
  --color-text-primary:      #003A51;  /* Texto principal en títulos */
  --color-text-body:         #374151;  /* Texto de cuerpo */
  --color-text-body-2:       #40484D;  /* Texto secundario */
  --color-text-muted:        #71787E;  /* Texto atenuado */
  --color-text-muted-2:      #94A3B8;  /* Texto muy atenuado */
  --color-text-muted-3:      #99A1AF;  /* Texto placeholder */
  --color-text-muted-4:      #6A7282;  /* Texto inactivo navbar */
  --color-text-on-dark:      #FFFFFF;  /* Texto sobre fondos oscuros */
  --color-text-on-image:     #FFFFFF;  /* Texto sobre imágenes (con sombra) */

  /* Fondos / Superficies */
  --color-bg:                #FFFFFF;  /* Fondo principal */
  --color-bg-alt:            #F8FAF9;  /* Fondo alternativo (cards suaves) */
  --color-bg-soft:           #F2F4F3;  /* Fondo suave (inputs, cards info) */
  --color-bg-muted:          #F3F4F6;  /* Fondo de chips inactivos */
  --color-surface:           #FFFFFF;  /* Superficie de cards */
  --color-surface-on-dark:   rgba(255, 255, 255, 0.97); /* Bottom sheet */

  /* Bordes / Dividers */
  --color-border:            #E5E7EB;  /* Borde principal */
  --color-border-soft:       #ECEEED;  /* Borde suave */
  --color-border-soft-2:     #E1E3E2;  /* Borde alternativo */
  --color-border-muted:      #E6E9E8;  /* Borde muy suave */

  /* Estados / Feedback */
  --color-success:           #16A34A;  /* Verde éxito */
  --color-success-bg:        #DCFCE7;  /* Fondo éxito */
  --color-warning:           #F59E0B;  /* Naranja warning (Novedad Leve) */
  --color-warning-soft:      #EAB308;  /* Amarillo warning */
  --color-warning-bg:        #FEF3C7;  /* Fondo warning */
  --color-danger:            #BA1A1A;  /* Rojo error (Novedad Grave, Cerrar sesión) */
  --color-danger-bg:         #FEE2E2;  /* Fondo error */
  --color-info:              #0369A1;  /* Azul info */
  --color-info-bg:           #C4E7FF;  /* Fondo info */

  /* Específicos del prototipo */
  --color-eco-text:          #0E2000;  /* Texto sobre chips eco */
  --color-text-dark:         #191C1C;  /* Texto muy oscuro */
  --color-overlay:           rgba(0, 58, 81, 0.05); /* Overlay sutil */
  --color-amber:             #D97706;  /* Ámbar (rating estrella alt) */

  /* ----------------------------------------------------------
     TIPOGRAFÍA
     ---------------------------------------------------------- */

  /* Familias de fuente */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;  /* Títulos grandes y marca */
  --font-body:    'Inter',   system-ui, -apple-system, sans-serif;  /* Texto UI y cuerpo */

  /* Escala tipográfica (extraída del prototipo) */
  --fs-2xs:   10px;   /* Labels diminutos (chips, navbar) */
  --fs-xs:    11px;   /* Texto pequeño (terms, hints) */
  --fs-sm:    12px;   /* Texto secundario */
  --fs-base:  13px;   /* Texto base */
  --fs-md:    14px;   /* Texto cuerpo principal */
  --fs-lg:    16px;   /* Subtítulos */
  --fs-xl:    18px;   /* Heading 4 / Marca header */
  --fs-2xl:   20px;   /* Heading 3 */
  --fs-3xl:   24px;   /* Heading 2 */
  --fs-4xl:   30px;   /* Heading 1 */
  --fs-5xl:   36px;   /* Display - "Aqua Amazónica" Bienvenida */

  /* Pesos */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Line heights */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.12em;  /* Para overlines tipo "EXPLORA LA REGIÓN" */

  /* ----------------------------------------------------------
     ESPACIADO
     ---------------------------------------------------------- */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Padding lateral estándar de pantalla */
  --screen-padding-x: 20px;

  /* ----------------------------------------------------------
     RADIOS
     ---------------------------------------------------------- */

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  28px;
  --radius-pill: 9999px;

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */

  --shadow-sm:  0 1px 2px 0 rgba(0, 58, 81, 0.05);
  --shadow:     0 4px 6px -1px rgba(0, 58, 81, 0.08), 0 2px 4px -1px rgba(0, 58, 81, 0.04);
  --shadow-md:  0 10px 15px -3px rgba(0, 58, 81, 0.10), 0 4px 6px -2px rgba(0, 58, 81, 0.05);
  --shadow-lg:  0 20px 25px -5px rgba(0, 58, 81, 0.12), 0 10px 10px -5px rgba(0, 58, 81, 0.04);
  --shadow-bottom-nav: 0 -2px 12px rgba(0, 58, 81, 0.08);
  --shadow-card-image: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* ----------------------------------------------------------
     TRANSICIONES
     ---------------------------------------------------------- */

  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
  --transition-slow:    400ms ease;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --bottom-nav-height: 72px;
  --header-height:     56px;
  --max-content-width: 480px;  /* Mobile-first, máximo ancho razonable */
  --safe-area-bottom:  env(safe-area-inset-bottom, 0px);
  --safe-area-top:     env(safe-area-inset-top, 0px);

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */

  --z-base:        0;
  --z-overlay:     10;
  --z-dropdown:    20;
  --z-bottom-nav:  1050;  /* sobre Leaflet (1000) */
  --z-header:      1060;
  --z-modal:       1100;
  --z-toast:       1200;
}

/* =============================================================
   RESET / NORMALIZACIÓN BÁSICA
   ============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-text-body);
  background-color: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Tipografía base por defecto */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
}

h1 { font-size: var(--fs-4xl); }   /* 30px */
h2 { font-size: var(--fs-3xl); }   /* 24px */
h3 { font-size: var(--fs-2xl); }   /* 20px */
h4 { font-size: var(--fs-xl); }    /* 18px */

p { line-height: var(--lh-relaxed); }