/* ============================================================
   LA PASTI — Design tokens (dgrafik)
   Sistema centralitzat. Canvia AQUÍ per re-skinnejar tota la web.
   IDENTITAT REAL DEL CLIENT (jul 2026): VERMELL de marca #9b1915 + blanc
   + crema càlida. El pistatxo (verd) ja NO és color de marca.
   Nota: es conserven els noms històrics (--pistatxo*, --gerd) per no
   tocar tot el CSS, però ARA totes aquestes variables són VERMELL de marca.
   ============================================================ */

:root {
  /* ---------- COLOR ---------- */
  /* Base càlida (crema/os) — el vermell hi llueix elegant */
  --paper:        #F6EFE0;   /* fons de pàgina (crema torrada) */
  --paper-2:      #FBF5EA;   /* fons clar alternatiu */
  --paper-3:      #EFE6D2;   /* targetes / superfícies */
  --ink:          #26140F;   /* text principal (negre càlid rojís) */
  --ink-soft:     #5C443C;   /* text secundari */
  --ink-faint:    #7C5D52;   /* metadades, hints (AA sobre paper) */
  --line:         #E2D6C0;   /* separadors */

  /* VERMELL DE MARCA (noms "pistatxo*" reutilitzats — ara són vermell) */
  --pistatxo:        #9B1915;  /* vermell marca (text/accents/links sobre clar) — AA sobre crema 7.2:1 */
  --pistatxo-bright: #9B1915;  /* fons sòlids de CTA (amb text blanc) */
  --pistatxo-pale:   #F7E4DF;  /* fons de secció suau (rosa-crema) */
  --pistatxo-deep:   #7A130F;  /* vermell profund (fons foscos / hover) */
  --pistatxo-light:  #EBA79F;  /* vermell clar/coral — accents sobre fons FOSCOS (footer, seccions vermelles) */

  /* Gerd → ara vermell pop (decoratiu i CTAs) */
  --gerd:      #C1362B;   /* vermell viu (decoratiu; blanc a sobre = 5.5:1) */
  --gerd-btn:  #9B1915;   /* botó vermell amb text blanc (AA 8.3:1) */
  --gerd-fosc: #7A130F;

  /* Mantega — guspira càlida daurada (guiny puntual, stickers/estrelles) */
  --mantega:   #F2C14E;
  --mantega-soft: #F7DDA0;

  /* Guiny gastronòmic de pistatxo — NOMÉS al producte estrella si cal (no és UI) */
  --pistatxo-nod: #6F8F3A;

  /* Neutres funcionals */
  --white:  #FFFFFF;
  --cream:  #FFF9EF;   /* text sobre fons foscos */
  --error:  #B4291B;
  --ok:     #2F7D3A;

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: "Clash Display", "Clash Display Fallback", Georgia, serif;
  --font-body:    "General Sans", "General Sans Fallback", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala tipogràfica fluida */
  --fs-mega:  clamp(4.2rem, 15vw, 15rem);   /* wordmark hero */
  --fs-xxl:   clamp(2.6rem, 7vw, 6rem);
  --fs-xl:    clamp(2rem, 4.6vw, 3.6rem);
  --fs-lg:    clamp(1.5rem, 3vw, 2.2rem);
  --fs-md:    clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-base:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.78rem;
  --fs-label: 0.72rem;  /* eyebrows mono */

  /* ---------- ESPAIAT ---------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  --container:  1280px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- FORMES ---------- */
  --radius-sm:  10px;
  --radius:     20px;
  --radius-lg:  32px;
  --radius-pill: 999px;

  /* ---------- OMBRES ---------- */
  --shadow-sm: 0 2px 10px rgba(32, 26, 18, 0.06);
  --shadow:    0 14px 40px -18px rgba(32, 26, 18, 0.28);
  --shadow-lg: 0 30px 70px -30px rgba(32, 26, 18, 0.40);

  /* ---------- MOTION (tokens fixos) ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur:      0.5s;
  --dur-slow: 0.9s;
}