/* ============================================================
   TOKENS — Design System Explora México Tours (doc maestro §5)
   Complementa los tokens de paleta ya definidos en style.css.
   Se carga solo en el sitio real (no en under construction).
   ============================================================ */
:root {
  /* Semánticos (§5.1) */
  --emt-color-text: var(--emt-gris-oscuro);
  --emt-color-text-muted: var(--emt-gris-medio);
  --emt-color-link: var(--emt-azul-brillante);
  --emt-color-cta: var(--emt-cta);
  --emt-color-cta-hover: var(--emt-cta-hover);
  --emt-color-success: var(--emt-verde);
  --emt-color-warning: var(--emt-naranja);
  --emt-color-danger: var(--emt-rojo);
  --emt-color-border: rgba(0, 51, 102, 0.08);

  /* Semánticos del rediseño 2026 */
  --emt-cta: var(--emt-magenta);          /* acción principal */
  --emt-cta-hover: #C4134F;
  --emt-acento: var(--emt-turquesa);      /* eyebrows, detalles frescos */
  --emt-acento-tinta: var(--emt-turquesa-tinta); /* acento como TEXTO sobre claro */
  --emt-calido: var(--emt-coral);         /* energía cálida (degradados, hovers) */
  --emt-highlight: var(--emt-ambar);      /* badges, highlights puntuales */

  /* Superficies (ritmo de secciones) */
  --emt-surface: var(--emt-blanco);
  --emt-surface-tint: #F2F7FB;            /* sección tenue */
  --emt-surface-dark: var(--emt-azul-profundo); /* sección oscura full-bleed */
  --emt-on-dark: #E9F1F8;                 /* texto base sobre superficie oscura */

  /* Firma visual: línea serape (solo bajo títulos de sección) */
  --emt-serape: linear-gradient(90deg, var(--emt-magenta), var(--emt-coral) 34%, var(--emt-ambar) 67%, var(--emt-turquesa));

  /* Overlay estándar para texto sobre fotos (cards de destino/tour) */
  --emt-overlay-img: linear-gradient(180deg, rgba(0, 20, 45, 0) 38%, rgba(0, 20, 45, 0.82) 100%);

  /* Anillo de foco (accesibilidad, hover/focus visibles) */
  --emt-focus-ring: 0 0 0 3px rgba(0, 87, 184, 0.35);

  /* Escala tipográfica (§5.2) — fluida desde el rediseño 2026 */
  --emt-fs-xs: 0.75rem;
  --emt-fs-sm: 0.875rem;
  --emt-fs-base: 1rem;
  --emt-fs-md: 1.125rem;
  --emt-fs-lg: clamp(1.35rem, 1.2rem + 0.7vw, 1.5rem);
  --emt-fs-xl: clamp(1.55rem, 1.3rem + 1.2vw, 2rem);
  --emt-fs-2xl: clamp(1.9rem, 1.45rem + 2.1vw, 2.75rem);
  --emt-fs-3xl: clamp(2.4rem, 1.7rem + 3.6vw, 4rem);
  --emt-fs-display: clamp(2.6rem, 1.8rem + 4.2vw, 4.5rem);

  /* Eyebrow (etiqueta de sección) */
  --emt-eyebrow-fs: 0.8125rem;
  --emt-eyebrow-tracking: 0.16em;

  --emt-fw-normal: 400;
  --emt-fw-medium: 500;
  --emt-fw-semibold: 600;
  --emt-fw-bold: 700;
  --emt-fw-black: 800;

  --emt-lh-tight: 1.1;
  --emt-lh-snug: 1.3;
  --emt-lh-normal: 1.5;
  --emt-lh-relaxed: 1.65;

  /* Espaciado (§5.3) */
  --emt-spacing-xs: 0.25rem;
  --emt-spacing-sm: 0.5rem;
  --emt-spacing-md: 1rem;
  --emt-spacing-lg: 1.5rem;
  --emt-spacing-xl: 2rem;
  --emt-spacing-2xl: 3rem;
  --emt-spacing-3xl: 4rem;
  --emt-spacing-4xl: 6rem;

  /* Layout */
  --emt-container-max: 1280px;
  --emt-container-narrow: 880px;
  --emt-container-wide: 1440px;
  --emt-gutter: 1.5rem;

  /* Border radius */
  --emt-radius-sm: 6px;
  --emt-radius-md: 12px;
  --emt-radius-card: 16px;
  --emt-radius-lg: 18px;
  --emt-radius-xl: 24px;
  --emt-radius-pill: 999px;

  /* Sombras */
  --emt-shadow-sm: 0 1px 3px rgba(0, 51, 102, 0.06);
  --emt-shadow-md: 0 4px 12px rgba(0, 51, 102, 0.08);
  --emt-shadow-lg: 0 12px 30px rgba(0, 51, 102, 0.12);
  --emt-shadow-xl: 0 24px 50px rgba(0, 51, 102, 0.18);

  /* Transiciones */
  --emt-transition-fast: 0.15s ease;
  --emt-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --emt-transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --emt-z-header: 1000;
  --emt-z-mega: 1010;
  --emt-z-drawer: 1100;
  --emt-z-float: 900;
}

/* Utilidad de contenedor */
.emt-container {
  width: 100%;
  max-width: var(--emt-container-max);
  margin-inline: auto;
  padding-inline: var(--emt-gutter);
}