/* SALVIA BLANCA — fundamentos de diseño
   Cocina campestre · Valle de Guadalupe

   Los tokens `--sb-brasa|ascua|ambar|salvia*` salen de los 6 swatches CMYK
   del archivo de marca (Logos/Logo/Paleta de colores.ai). Se listan aquí ya
   CALIBRADOS para pantalla: la conversión aritmética CMYK→RGB los deja
   fosforescentes, sobre todo los verdes. Los CMYK originales van en el
   comentario de cada uno para que impresión y web no se separen.

   Los neutros no venían definidos en la marca; se derivaron de la fotografía
   real del restaurante (piedra, madera de roble, mantel de lino, noche). */

:root {
  /* ---- Cálidos: la brasa. El fuego del fogatero y la cocina de campo. ---- */
  --sb-brasa: #c1440e; /* CMYK 12/76/98/2  — acento principal, CTA */
  --sb-ascua: #e2691b; /* CMYK  2/63/97/0  — hover, detalles */
  --sb-ambar: #efa24c; /* CMYK  0/39/78/0  — luz cálida, subrayados */

  /* ---- Fríos: la salvia. El herbal del logo y del huerto. ---- */
  --sb-salvia: #86b77f; /* CMYK 54/11/56/0 — verde vivo, uso puntual */
  --sb-salvia-medio: #5f9c88; /* CMYK 58/25/36/7 — verde-azulado, secciones */
  --sb-salvia-palido: #afcbb4; /* CMYK 39/14/30/1 — fondos suaves, bordes */

  /* ---- Neutros: derivados de foto (piedra, roble, lino, noche). ---- */
  --sb-tinta: #1c1a17; /* texto principal, footer */
  --sb-carbon: #3a3630; /* texto secundario */
  --sb-piedra: #8c857a; /* SOLO decorativo — no pasa AA como texto */
  --sb-lino: #e4ddd0; /* bordes, separadores */
  --sb-hueso: #f8f4ec; /* fondo de página */
  --sb-blanco: #ffffff;

  /* ---- Variantes legibles ----
     Ámbar, Salvia y Piedra no alcanzan 4.5:1 sobre Hueso, así que como TEXTO
     se usan estas versiones oscurecidas. Los originales quedan para rellenos,
     bordes y gráficos. Medido con WCAG 2.1 contra --sb-hueso. */
  --sb-salvia-texto: #497869; /* 4.59:1 */
  --sb-piedra-texto: #746e65; /* 4.60:1 */
  --sb-ascua-texto: #b55416; /* 4.51:1 */

  /* ---- Roles semánticos (usa estos, no los crudos de arriba). ---- */
  --color-fondo: var(--sb-hueso);
  --color-superficie: var(--sb-blanco);
  --color-texto: var(--sb-tinta);
  --color-texto-suave: var(--sb-carbon);
  --color-texto-tenue: var(--sb-piedra-texto);
  --color-borde: var(--sb-lino);
  --color-acento: var(--sb-brasa);
  --color-acento-hover: var(--sb-ascua);
  --color-realce: var(--sb-salvia-texto);

  /* ---- Tipografía ---- */
  --font-titulo: 'NewYork', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-cuerpo: 'Brandon Grotesque', 'Futura', 'Avenir Next', 'Segoe UI', sans-serif;

  /* Escala 1.25 (tercera mayor), fluida entre 360px y 1440px. */
  --txt-xs: 0.78rem;
  --txt-sm: 0.9rem;
  --txt-base: 1rem;
  --txt-md: clamp(1.1rem, 0.3vw + 1.03rem, 1.25rem);
  --txt-lg: clamp(1.35rem, 0.7vw + 1.2rem, 1.75rem);
  --txt-xl: clamp(1.7rem, 1.4vw + 1.35rem, 2.6rem);
  --txt-2xl: clamp(2.1rem, 2.6vw + 1.5rem, 3.8rem);
  --txt-3xl: clamp(2.6rem, 4.6vw + 1.5rem, 5.6rem);

  --peso-ligero: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 700;

  --alto-titulo: 1.08;
  --alto-cuerpo: 1.65;
  --track-eyebrow: 0.22em; /* versalitas de sección */
  --track-titulo: -0.01em;

  /* ---- Espaciado: base 8, con 4 para ajustes finos. ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- Layout ---- */
  --ancho-prosa: 68ch;
  --ancho-contenido: 1180px;
  --ancho-ancho: 1440px;
  --canal: clamp(1.25rem, 4vw, 4rem); /* padding lateral de página */

  /* ---- Forma. Casi recto: la marca es dibujo a mano, no burbujas. ---- */
  --radio-sm: 2px;
  --radio-md: 4px;
  --radio-lg: 8px;
  --radio-full: 999px;

  /* ---- Sombra: luz cálida, nunca gris azulada. ---- */
  --sombra-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
  --sombra-md: 0 4px 16px rgba(28, 26, 23, 0.08);
  --sombra-lg: 0 18px 48px rgba(28, 26, 23, 0.14);

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-rapido: 140ms;
  --dur-medio: 260ms;
  --dur-lento: 520ms;
}

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