/* ==========================================================================
   Alun Gluten Free — Design tokens
   --------------------------------------------------------------------------
   Sistema de diseño de la marca. Los colores salen del logo vectorial y del
   packaging real (muestreados, no estimados); las tipografías son sustitutos
   libres de las originales del packaging (ver README).

   Capas:  primitivas (--c-*, --s-*, --fs-*)  ->  semánticas (--bg, --text…)
   Usar siempre las semánticas en los componentes.
   ========================================================================== */

:root {
  /* ---- Primitivas · color de marca -------------------------------------- */
  --c-green: #317430;        /* "Alun" del logo */
  --c-green-dark: #245623;
  --c-green-deep: #16301a;
  --c-green-bright: #43933f;
  --c-leaf: #b5d482;         /* trazo claro del logo */
  --c-terracotta: #bf6e3e;   /* "gluten free" del logo */
  --c-terracotta-light: #de9152;
  --c-terracotta-ink: #a2572c; /* variante con contraste para texto */
  --c-amber: #fdd303;        /* amarillo del packaging Trozos XL */
  --c-amber-deep: #e0a83c;   /* bandas doradas del packaging */

  /* ---- Primitivas · neutros --------------------------------------------- */
  --c-ink-900: #0f1012;      /* negro del packaging */
  --c-ink-800: #17181a;
  --c-ink-700: #22242a;
  --c-ink-600: #35373d;
  --c-ink-400: #7a7d85;
  --c-ink-300: #ada79b;

  --c-paper: #faf7f0;
  --c-paper-2: #f2ece0;
  --c-paper-3: #e6ddcc;
  --c-text: #22201c;
  --c-text-muted: #5e5a52;
  --c-white: #fff;

  /* ---- Semánticas · superficie y texto ---------------------------------- */
  --bg: var(--c-paper);
  --bg-alt: var(--c-paper-2);
  --bg-dark: var(--c-ink-900);
  --bg-dark-2: var(--c-ink-800);
  --surface: var(--c-white);
  --border: color-mix(in srgb, var(--c-text) 12%, transparent);
  --border-dark: color-mix(in srgb, var(--c-white) 14%, transparent);

  --text: var(--c-text);
  --text-muted: var(--c-text-muted);
  --text-on-dark: #f4f1ea;
  --text-on-dark-muted: var(--c-ink-300);

  --accent: var(--c-green);
  --accent-hover: var(--c-green-dark);
  --accent-warm: var(--c-terracotta);
  --accent-warm-text: var(--c-terracotta-ink);
  --focus-ring: var(--c-amber);

  /* ---- Tipografía -------------------------------------------------------
     Tres voces con roles distintos, no tres fuentes intercambiables:

     · Fraunces  — serif variable con ejes SOFT y WONK. Es la voz editorial y
                   cálida de la marca: titulares de sección y hero.
     · Bricolage Grotesque — grotesca variable con eje de ancho. Comprimida y
                   pesada imita la display del packaging (nombres de producto,
                   precios, navegación); en ancho normal es el cuerpo de texto.
     · Imperial Script — caligráfica, solo para los acentos manuscritos.     */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman",
    serif;
  --font-cond: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue",
    system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-script: "Imperial Script", "Snell Roundhand", "Brush Script MT",
    cursive;

  /* Ajustes de ejes variables, aplicados con font-variation-settings para no
     depender de que el navegador mapee bien font-stretch.

     De Fraunces se pide una sola instancia fija (opsz 72, peso 700, SOFT 40,
     WONK 1): pedir los cuatro ejes completos costaba 118 KB frente a 32 KB.
     De Bricolage sí se mantiene el eje de ancho, que es el que imita la
     display del packaging; se descartó su eje opsz (128 KB -> 76 KB). */
  --vf-display: normal;
  --vf-display-sm: normal;
  --vf-cond: "wdth" 78;
  /* 75 es el mínimo real del eje wdth de Bricolage: pedir menos no
     estrechaba más, el navegador lo recortaba en silencio. */
  --vf-cond-tight: "wdth" 75;
  --vf-body: "wdth" 100;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.0625rem, 0.99rem + 0.35vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --fs-3xl: clamp(2.375rem, 1.7rem + 3.4vw, 4.5rem);
  --fs-4xl: clamp(3rem, 1.9rem + 5.5vw, 6.5rem);

  --lh-tight: 1.02;
  --lh-snug: 1.22;
  --lh-normal: 1.62;
  --tracking-display: -0.015em;   /* Fraunces respira mejor un poco cerrada */
  --tracking-cond: 0.005em;
  --tracking-eyebrow: 0.22em;

  /* ---- Espaciado (base 4px) --------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Formas y profundidad --------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(15 16 18 / 6%), 0 2px 6px rgb(15 16 18 / 5%);
  --shadow-md: 0 4px 12px rgb(15 16 18 / 8%), 0 12px 28px rgb(15 16 18 / 8%);
  --shadow-lg: 0 12px 32px rgb(15 16 18 / 14%), 0 32px 64px rgb(15 16 18 / 12%);

  /* ---- Layout ------------------------------------------------------------ */
  --container: 76rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem);
  --header-h: 4.5rem;

  /* ---- Movimiento -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Entradas largas: arranca rápido y se posa despacio, como algo que se
     deja sobre la mesa. Es la curva de la capa de movimiento (styles.css). */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Resortes de verdad, muestreados de un oscilador amortiguado con
     linear(). No son curvas "con rebote" dibujadas a ojo: arrancan desde
     velocidad cero, se pasan un poco y vuelven, como un objeto con masa.
     · spring      (amortiguación 0,6; se pasa un 9 %): lo que "aterriza",
                   el sello del hero y el botón flotante de WhatsApp.
     · spring-soft (amortiguación 0,72; se pasa un 4 %): respuesta al
                   cursor y al toque en botones, tarjetas y menú.
     Navegadores sin linear() (Safari < 17.2) caen en `ease`, sin romperse. */
  --ease-spring: linear(0, 0.053, 0.182, 0.349, 0.523, 0.684, 0.822, 0.93,
    1.008, 1.058, 1.085, 1.095, 1.091, 1.08, 1.065, 1.048, 1.033, 1.019,
    1.008, 1, 0.995, 0.992, 0.991, 0.991, 0.992, 0.994, 0.995, 0.997, 1);
  --ease-spring-soft: linear(0, 0.031, 0.11, 0.216, 0.334, 0.454, 0.568,
    0.671, 0.76, 0.835, 0.896, 0.943, 0.979, 1.005, 1.022, 1.032, 1.037,
    1.038, 1.037, 1.034, 1.03, 1.025, 1.021, 1.016, 1.012, 1.009, 1.006,
    1.004, 1);
  /* Salidas: aceleran y se van. Más cortas que las entradas (~60 %). */
  --ease-in-quick: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;
  --dur-spring: 520ms;       /* un resorte necesita tiempo para asentarse */
  --dur-press: 90ms;         /* hundirse al tocar: casi inmediato */
  --stagger: 60ms;           /* desfase entre hermanos de una grilla */
}