/**
 * tokens.css — Sussanich Turismo
 * Todas las custom properties del sistema de diseño.
 * Fuente de verdad de colores, tipografía, spacing, radios, sombras, z-index.
 * CERO hex hardcodeados fuera de este archivo.
 * Generado: 2026-05-05 | Paso 1
 */

@font-face {
  font-family: "MinervaModern";
  src: url("../fonts/fonnts.com-MinervaModern_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MinervaModern";
  src: url("../fonts/fonnts.com-MinervaModern_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ─── COLORES DE MARCA ─────────────────────────────────────────────────── */
  --color-primary:        #F28C1F;  /* [medido] naranja CTAs, ítems activos */
  --color-primary-hover:  #D9770B;  /* [inferido] hover CTAs */
  --color-secondary:      #F5C542;  /* [medido] amarillo logo/sellos */
  --color-accent-dark:    #1B2B3A;  /* [medido] azul hero overlay / títulos */

  /* ─── SUPERFICIES ──────────────────────────────────────────────────────── */
  --color-background:     #FFFFFF;  /* [medido] fondo base */
  --color-surface:        #F4F4F2;  /* [medido] fondo gris secciones catálogo */
  --color-surface-card:   #FFFFFF;  /* [medido] fondo cards y formularios */
  --color-footer:         #2B2B2B;  /* [medido] fondo footer */
  --color-footer-stripe:  #1F1F1F;  /* [inferido] banda legal inferior footer */
  --color-footer-accent:  #8C5C2E;  /* naranja apagado/desaturado para divisores del footer (decisión Yago 2026-05-18) */

  /* ─── TEXTO ────────────────────────────────────────────────────────────── */
  --color-text-primary:        #1B1B1B;  /* [medido] texto principal sobre claro */
  --color-text-secondary:      #5C5C5C;  /* [medido] descripciones, subtítulos */
  --color-text-muted:          #9A9A9A;  /* [inferido] placeholders, fechas, legales */
  --color-text-on-dark:        #FFFFFF;  /* [medido] texto sobre hero/footer */
  --color-text-on-dark-muted:  #BFBFBF;  /* [inferido] texto descriptivo footer */
  --color-text-link:           #F28C1F;  /* [medido] enlaces inline */

  /* ─── FEEDBACK / ESTADO ────────────────────────────────────────────────── */
  --color-success:      #25D366;  /* [medido] WhatsApp */
  --color-success-alt:  #00B67A;  /* [medido] TripAdvisor */
  --color-error:        #E74C3C;  /* [inferido] eliminar, validaciones */
  --color-warning:      #F5A623;  /* [inferido] badges oferta */
  --color-border:       #E5E5E5;  /* [medido] bordes inputs, divisores */
  --color-border-soft:  #F0F0EE;  /* [inferido] separadores suaves tablas */

  /* ─── TIPOGRAFÍA — FAMILIAS (2 fonts: Minerva títulos, Jost todo lo demás) ── */
  --font-display: "MinervaModern", Georgia, serif;
  --font-body:    "Jost", system-ui, -apple-system, sans-serif;

  /* ─── TIPOGRAFÍA — TAMAÑOS ─────────────────────────────────────────────── */
  /* Escala global x~1.4 (decisión Yago 2026-05-18, iter SUS).
   * Anclas pedidas: h1 = 68px / kicker = 18px. El resto escala proporcional.
   * EN PX PUROS: rem dependía de la base del html y algún reset la estaba
   * pisando, haciendo que 4.25rem rindiera como 42.5px en pantalla. Px = inequívoco. */
  --fs-hero:    90px;  /* display, hero Home */
  --fs-hero-lg: 112px; /* display, título página individual largo */
  --fs-h1:      68px;  /* display, hero estándar */
  --fs-h2:      45px;  /* sans, títulos de sección */
  --fs-h3:      26px;  /* títulos de card */
  --fs-h4:      25px;  /* sans, nombre producto card compacta */
  --fs-h5:      22px;  /* sans, columnas footer */
  --fs-kicker:  18px;  /* sans, uppercase microtítulo */
  --fs-body:    16px;  /* sans, párrafos (decisión Yago 2026-05-18) */
  --fs-body-sm: 14px;  /* sans, footer, descripción card */
  --fs-caption: 12px;  /* sans, legales, copyright, descripción de cards */
  --fs-price:   22px;  /* sans, precio en cards (Yago 2026-05-18) */
  --fs-price-lg:42px;  /* sans, precio card viaje lista */
  --fs-nav:     16px;  /* [cliente pidió más grande; subido 15→16px 2026-06-17, padding li bajado a 24/12 para no romper navbar en desktop angosto] */
  --fs-btn:     12px;  /* sans, texto CTA (decisión Yago 2026-05-18) */
  --fs-counter: 100px; /* display, cifras "Por qué elegirnos" */

  /* ─── TIPOGRAFÍA — PESOS ───────────────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── TIPOGRAFÍA — LINE-HEIGHT ─────────────────────────────────────────── */
  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-base:   1.4;
  --lh-normal: 1.6;

  /* ─── TIPOGRAFÍA — LETTER-SPACING ──────────────────────────────────────── */
  --ls-kicker: 0.12em;
  --ls-btn:    0.04em;
  --ls-nav:    0.02em;

  /* ─── SPACING INTERNO EN PX (escala 4/8) ───────────────────────────────── */
  --space-0:  0;
  --space-05: 4px;
  --space-1:  8px;
  --space-2:  12px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9:  120px;

  /* ─── SPACING ESTRUCTURAL EN % / CLAMP ─────────────────────────────────── */
  --gutter-page:       clamp(16px, 5vw, 80px);
  --gutter-section:    clamp(40px, 8vh, 120px);
  --gutter-card-grid:  2%;
  --inner-pad-card:    8%;
  --inner-pad-form:    6%;
  --hero-pad-y:        clamp(80px, 12vh, 160px);

  /* ─── CONTENEDOR ────────────────────────────────────────────────────────── */
  --container-max:       1200px;
  --container-narrow:    960px;
  --container-padding-x: var(--gutter-page);

  /* ─── BORDER RADIUS ─────────────────────────────────────────────────────── */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ─── SOMBRAS ───────────────────────────────────────────────────────────── */
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.06);
  --shadow-md:  0 6px 18px rgba(0,0,0,0.10);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.14);
  --shadow-fab: 0 8px 20px rgba(0,0,0,0.20);

  /* ─── MOTION ────────────────────────────────────────────────────────────── */
  --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  /* ─── Z-INDEX ───────────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-overlay: 10;
  --z-sticky:  100;
  --z-navbar:  200;
  --z-fab:     300;
  --z-modal:   400;

}