/* PENDIENTE: cambiar las 3 tipografías provisionales por las de marca cuando lleguen los archivos.
   Metta Melt · design system · tokens
   Font: brandbook V1.2 (Identidad de Marca 2026), pàgines 15 i 16.
   Les tres tipografies de marca són de pagament: fins que no arribin els fitxers
   s'usen substituts de Google Fonts (marcats amb "provisional"). */

/* Tipografies provisionals allotjades en local (sense crides a Google). Llicència OFL. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/fraunces-latin.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 600;font-display:swap;src:url("../fonts/outfit-latin.woff2") format("woff2")}
@font-face{font-family:"Caveat Brush";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/caveat-brush-latin.woff2") format("woff2")}

:root {
  /* colors de marca */
  --albahaca:    #18412E; /* verd fosc, predominant */
  --mantequilla: #FAC504; /* groc */
  --crema:       #FCF7EE; /* fons */
  --menta:       #9CBAAA; /* verd suau */
  --tomate:      #E8381C; /* vermell, logotip */

  /* rols */
  --fons:        var(--crema);
  --text:        var(--albahaca);
  --text-suau:   color-mix(in srgb, var(--albahaca) 72%, var(--crema));
  --accent:      var(--tomate);
  --destacat:    var(--mantequilla);
  --suau:        var(--menta);
  --linia:       color-mix(in srgb, var(--albahaca) 18%, transparent);
  --sobre-fosc:  #ffffff; /* text blanc sobre Albahaca */

  /* tipografia */
  --font-titol:  "PP Pangaia", "Fraunces", Georgia, serif;          /* Fraunces: provisional */
  --font-text:   "Charlevoix Pro", "Outfit", system-ui, sans-serif; /* Outfit: provisional */
  --font-accent: "More Sugar", "Caveat Brush", cursive;             /* Caveat Brush: provisional */

  --t-h1: clamp(2.75rem, 7vw, 5.5rem);
  --t-h2: clamp(2rem, 4.5vw, 3.5rem);
  --t-h3: 1.5rem;
  --t-cos: 1.125rem;
  --t-petit: .875rem;

  /* espai i forma */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 7rem;
  --amplada: 1160px;
  --radi: 999px;      /* botons: forma fluida */
  --radi-targeta: 28px;
}