/* assets/css/marca.css — los tokens de Travel by Humans.
 *
 * LA ÚNICA FUENTE del sistema visual. Sale del brand book 2026: azul
 * profundo para la confianza, coral para el impulso, crema papel para el
 * contenido editorial. Proporción orientativa: 65 % azul, 22 % crema y
 * neutros, 13 % coral — el coral SEÑALA (CTA, estados activos, puntos),
 * nunca inunda.
 *
 * CÓMO SE CONSUME
 *
 * Cada página conserva sus variables locales (--ink, --paper, --sea,
 * --gv2-*, --vg-*…) y las REDEFINE apuntando aquí. Así el reskin no toca
 * miles de reglas, y si mañana cambia un color de marca, cambia en un solo
 * sitio. Esta hoja se carga ANTES que la de cada página.
 *
 * Tipografía: Aptos es la familia del manual; no existe como webfont
 * pública, así que la pila cae a Inter (ya se sirve vía Google Fonts, como
 * el resto de fuentes del sitio) y de ahí al sistema. Una sola familia;
 * la jerarquía la pone la escala, no otra fuente.
 */

:root {
  /* ── Paleta principal ── */
  --color-brand-blue:  #002D55; /* azul humano */
  --color-brand-night: #001B35; /* azul noche — secciones inmersivas */
  --color-brand-coral: #FF3B2F; /* coral ruta — CTA y acentos */
  --color-brand-cream: #FAF7F1; /* crema papel — fondos editoriales */

  /* ── Paleta de apoyo ── */
  --color-brand-sky:   #DCEAF3; /* cielo */
  --color-brand-sand:  #E8D8C5; /* arena */
  --color-brand-mist:  #E8ECEF; /* niebla */
  --color-brand-ink:   #0B2742; /* tinta — texto sobre claro */
  --color-white:       #FFFFFF;

  /* Derivados de uso constante. El coral oscuro es el estado hover del
     CTA (mismo tono, menos luz); la línea es niebla con la tinta detrás. */
  --color-brand-coral-oscuro: #E02A1F;
  --color-linea: #DCE3E9;
  --color-mudo: #4E617A; /* tinta rebajada para texto secundario (AA sobre crema) */

  /* ── Tipografía ── */
  --font-brand: "Aptos", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala responsive (px de referencia del manual, fluida con clamp) */
  --texto-display: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);     /* 52–64 */
  --texto-h2:      clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);  /* 35–44 */
  --texto-h3:      clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem); /* 24–30 */
  --texto-destacado: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);/* 20–24 */
  --texto-cuerpo:  clamp(1rem, 0.95rem + 0.2vw, 1.125rem);  /* 16–18 */
  --texto-etiqueta: 0.8125rem;                              /* 13 */

  /* ── Espaciado (módulo de 8 px) ── */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-12: 96px;

  /* ── Radios y sombra ── */
  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --shadow-soft: 0 12px 32px rgb(0 27 53 / 10%);

  /* ── Retícula ── */
  --content-width: 1200px;
  /* Saltos de referencia (no hay custom media sin build; se documentan aquí
     y las hojas usan los valores): 320 · 375 · 768 · 1024 · 1440. */

  /* ── Interacción ── */
  --dur-rapida: 150ms;
  --dur-media: 220ms;
  --foco: 2px solid var(--color-brand-coral);
  --foco-desplazado: 2px;
}

/* Foco visible, igual en todas las superficies. Cada página puede afinarlo,
   pero ninguna puede quedarse sin él. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-desplazado);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-media: 0ms; }
}