/* ============================================================
   TOKENS — Design System Viaja con Etzayorkina
   Complementa los tokens de paleta definidos en style.css.
   Se carga solo en el sitio real (no en under construction).
   Territorio: fondo hueso, mucho aire, detalles finos en bronce.
   ============================================================ */
:root {
  /* Semánticos */
  --vce-color-text: var(--vce-gris-oscuro);
  --vce-color-text-muted: var(--vce-gris-medio);
  --vce-color-link: var(--vce-indigo);
  --vce-color-cta: var(--vce-cta);
  --vce-color-cta-hover: var(--vce-cta-hover);
  --vce-color-success: var(--vce-verde);
  --vce-color-warning: var(--vce-naranja);
  --vce-color-danger: var(--vce-rojo);
  --vce-color-border: rgba(0, 48, 117, 0.10);

  /* Acción y acentos */
  --vce-cta: var(--vce-indigo);           /* acción principal (sobria) */
  --vce-cta-hover: var(--vce-yale);
  --vce-acento: var(--vce-bronce);        /* eyebrows, líneas finas, detalles premium */
  --vce-acento-tinta: var(--vce-bronce-tinta); /* acento como TEXTO sobre claro */
  --vce-calido: var(--vce-naranja);       /* realce puntual */
  --vce-highlight: var(--vce-picton);     /* badges, estados, enlaces claros */

  /* Superficies (ritmo de secciones) */
  --vce-surface: var(--vce-hueso);
  --vce-surface-tint: var(--vce-blanco);
  --vce-surface-soft: var(--vce-columbia);
  --vce-surface-dark: var(--vce-yale);    /* sección oscura full-bleed */
  --vce-on-dark: #EEF3F7;                 /* texto base sobre superficie oscura */

  /* Firma visual: línea fina de bronce bajo títulos de sección */
  --vce-linea: linear-gradient(90deg, var(--vce-bronce), var(--vce-bronce));
  --vce-linea-w: 56px;
  --vce-linea-h: 1px;

  /* Overlay estándar para texto sobre fotos */
  --vce-overlay-img: linear-gradient(180deg, rgba(0, 24, 58, 0) 40%, rgba(0, 24, 58, 0.78) 100%);

  /* Anillo de foco (accesibilidad) */
  --vce-focus-ring: 0 0 0 3px rgba(71, 164, 221, 0.45);

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

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

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

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

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

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

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

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

  /* Transiciones */
  --vce-transition-fast: 0.15s ease;
  --vce-transition-base: 0.22s cubic-bezier(0.23, 1, 0.32, 1); /* ease-out fuerte: menús y cajón responden al instante */
  --vce-transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

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

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