/* ============================================================
   Taberna Al Tulipán de Oro · Vitoria-Gasteiz
   Tokens: plantilla y colores de Enso (negro, crema y oro).
   Cada valor pertenece a una escala. No añadir valores sueltos.

   Contraste WCAG medido:
   oro / negro 8.1 · claro-2 / negro 7.8 · claro-3 / negro 5.3
   oscuro-2 / crema 6.4 · oscuro-3 / crema 5.1 · oro-texto / crema 5.3
   negro sobre oro 8.1 · oro-oscuro / crema 3.5 (solo dibujos, no texto)
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- Espaciado: base 4px --- */
  --space-xxs: 4px;   --space-xs: 8px;    --space-sm: 12px;
  --space-md: 16px;   --space-lg: 24px;   --space-xl: 32px;
  --space-2xl: 40px;  --space-3xl: 48px;  --space-4xl: 64px;
  --space-5xl: 96px;  --space-6xl: 128px;
  --space-seccion: 120px;

  --radius-xs: 2px;

  /* --- Layout --- */
  --container-max: 1240px;
  --container-estrecho: 860px;
  --cabecera-max: 1360px;
  --gutter: 40px;
  --alto-cabecera: 67px;

  /* --- Negros (de Enso) --- */
  --negro:     #0a0908;   /* fondo */
  --negro-2:   #12100e;   /* superficie */
  --negro-3:   #1a1714;   /* huecos de foto sobre negro */
  --negro-4:   #080706;   /* bandas y cinta */
  --negro-pie: #040303;

  /* --- Cremas --- */
  --crema:   #f5f2eb;
  --crema-2: #ede8dc;
  --crema-3: #e4dfd5;

  /* --- Texto --- */
  --claro-1:  #f5f3ec;    /* principal sobre negro */
  --claro-2:  #a8a297;    /* secundario sobre negro */
  --claro-3:  #8a847a;    /* discreto sobre negro */
  --oscuro-1: #181715;    /* principal sobre crema */
  --oscuro-2: #5c574e;    /* secundario sobre crema */
  --oscuro-3: #6b655b;    /* discreto sobre crema */

  /* --- Oro --- */
  --oro:        #c5a059;
  --oro-claro:  #dfbe78;
  --oro-oscuro: #9e7b36;
  --oro-texto:  #7a5c22;  /* oro para letra pequeña sobre crema */
  --oro-brillo: rgba(197, 160, 89, 0.25);
  --oro-borde:  rgba(197, 160, 89, 0.35);
  --oro-filete: rgba(197, 160, 89, 0.16);
  --vino-tinto: #6d2230;  /* solo el líquido de la botella de tinto */

  /* --- Tipografía (la de Enso) ---
     Cinzel: marca, menú, insignias y botones.
     Cormorant Garamond: titulares, platos, precios y horarios.
     Plus Jakarta Sans: texto corrido. */
  --font-marca:     "Cinzel", "Cormorant Garamond", Georgia, serif;
  --font-editorial: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:      "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --size-hero:    clamp(3.2rem, 9vw, 7.4rem);
  --size-pagina:  clamp(3.2rem, 7vw, 5.6rem);
  --size-titular: clamp(2.5rem, 5vw, 4.1rem);
  --size-sub:     clamp(2rem, 3.6vw, 3rem);

  --suave: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  :root { --gutter: 20px; --space-seccion: 80px; }
}
@media (max-width: 520px) {
  :root { --alto-cabecera: 63px; }
}

/* Guardarraíl de movimiento. El tulipán y la cinta siguen en bucle porque así
   se pidió; los dos se paran con el botón «Pausar animaciones» del pie. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tulipan .tallo, .tulipan .petalo { animation-duration: 9s !important; animation-iteration-count: infinite !important; }
  .cinta-pista { animation-duration: 40s !important; animation-iteration-count: infinite !important; }
}