/* Tokens: color, tipografía, escala y movimiento.
 *
 * Todo lo que se repite vive aquí. Si un valor aparece dos veces en otra hoja,
 * es que le falta token.
 *
 * ── Los colores son los OFICIALES de la marca ──────────────────────────────
 *
 * Acento #004c97, fondo #f2f5f9 y tarjeta #fdfdfd. Confirmados por Javier el
 * 18/09/2026. El azul es el mismo que el CSS antiguo tenía como
 * `--iparralde-blue`; estaba ahí desde el principio y no se leyó como oficial.
 *
 * Antes de esto hubo una paleta oscura cálida inventada aquí, porque al sacar
 * color del cartel de la calle (fotografiado de noche) no salía nada y no se
 * preguntó si existía una paleta de marca. No se vuelve a hacer: el color de
 * una marca se pregunta, no se deduce.
 *
 * ── Sobre el texto ─────────────────────────────────────────────────────────
 *
 * Los once pares de texto/fondo están verificados a contraste AA (el más justo
 * es 5,05:1). Pero el contraste calculado NO basta: la paleta anterior daba
 * 9,47:1 en el texto secundario y aun así se veía lavada, porque un beige de
 * poca saturación sobre marrón oscuro se percibe apagado aunque el número
 * salga. Por eso los grises de aquí son pizarras oscuras y no grises tibios.
 * Si añades un color de texto, compruébalo con scripts/comprobar.py Y míralo.
 */

:root {
  /* ── Color de marca (oficial) ──────────────────────────────────────────── */
  --acento:       #004c97;   /* botones y enlaces */
  --fondo:        #f2f5f9;   /* alrededor de la tarjeta */
  --fondo-alto:   #fdfdfd;   /* la tarjeta: donde va el texto */

  /* ── Derivados ─────────────────────────────────────────────────────────── */
  --acento-hover: #003a75;
  --fondo-suave:  #e4eaf2;   /* separadores y estados hover */
  --brasa:        #8a4b00;   /* ámbar de las brasas, para precios; oscurecido
                                para que se lea sobre fondo claro */

  --texto:        #0f1923;   /* 16,2:1 — casi negro con matiz azul, emparenta
                                con el acento sin ser un negro plano */
  --texto-suave:  #39475a;   /*  8,6:1 — pizarra, no gris lavado */
  --texto-tenue:  #5b6a7d;   /*  5,1:1 — el mínimo que uso para texto pequeño */

  --linea:        rgba(15, 25, 35, 0.12);
  --linea-fuerte: rgba(15, 25, 35, 0.26);

  /* ── Texto ENCIMA de una foto ──────────────────────────────────────────── */
  /* No se reutilizan los de arriba: sobre una foto no hay contraste calculable
   * —cambia con cada píxel— así que va blanco puro sobre un velo que garantiza
   * el fondo. El texto sobre foto NUNCA usa --texto-suave ni --texto-tenue:
   * ahí es donde peor se leía. */
  --sobre-foto:       #ffffff;
  --sobre-foto-suave: rgba(255, 255, 255, 0.92);
  --sombra-foto:      0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.45);

  /* El velo del hero: transparente arriba para que la foto respire, y opaco
   * abajo, que es donde se apoya el texto. */
  --velo-hero: linear-gradient(to bottom,
                 rgba(6, 14, 22, 0.42) 0%,
                 rgba(6, 14, 22, 0.28) 30%,
                 rgba(6, 14, 22, 0.72) 72%,
                 rgba(6, 14, 22, 0.88) 100%);

  --velo-cabecera: rgba(253, 253, 253, 0.92);

  /* ── Tipografía ────────────────────────────────────────────────────────── */
  --tipo-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --tipo-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* La mono es solo para etiquetas: antetítulos, numeración y pies de foto.
   * Es lo que saca al conjunto del aire genérico, y en una carta lee a ticket
   * de comanda. Nunca para texto corrido. */
  --tipo-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fluida: el tamaño lo pone el ancho de la ventana, sin saltos. */
  --t-xs:   0.8rem;
  --t-sm:   0.9rem;
  --t-base: 1rem;
  --t-md:   clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --t-lg:   clamp(1.3rem,  1.15rem + 0.7vw,  1.7rem);
  --t-xl:   clamp(1.7rem,  1.35rem + 1.6vw,  2.6rem);
  --t-2xl:  clamp(2.2rem,  1.5rem  + 3.2vw,  4rem);
  --t-3xl:  clamp(2.8rem,  1.6rem  + 5.2vw,  5.5rem);

  --interlinea:        1.65;
  --interlinea-titulo: 1.08;

  /* ── Espacio ───────────────────────────────────────────────────────────── */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  --seccion: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ── Medidas ───────────────────────────────────────────────────────────── */
  --ancho-max:   78rem;
  --ancho-texto: 38rem;   /* ~70 caracteres: el largo de línea que se lee bien */
  --gutter:      clamp(1rem, 0.5rem + 2.5vw, 3rem);

  --radio:        4px;
  --radio-grande: 8px;

  --sombra-tarjeta: 0 1px 2px rgba(15, 25, 35, 0.06),
                    0 4px 16px rgba(15, 25, 35, 0.05);

  /* ── Movimiento ────────────────────────────────────────────────────────── */
  --curva: cubic-bezier(0.4, 0, 0.2, 1);
  --rapido: 160ms var(--curva);
  --medio:  320ms var(--curva);
  --lento:  600ms var(--curva);

  /* ── Capas ─────────────────────────────────────────────────────────────── */
  --z-hero:     1;
  --z-cabecera: 100;
  --z-menu:     200;
  --z-dialogo:  300;
}

/* Quien haya pedido menos movimiento, que no lo tenga. No es una preferencia
 * estética: hay gente a la que el movimiento le provoca mareo. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rapido: 1ms;
    --medio:  1ms;
    --lento:  1ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}