/* ============================================================================
   theme.css — TOKEN VISIVI + @font-face
   ----------------------------------------------------------------------------
   UNICO file CSS che il `builder` rigenera per ogni cliente, leggendo
   `theme.colors` / `theme.fonts` da content.json.
   base.css / components.css / motion.css NON si toccano: usano var().

   Default di scaffold: palette "ember/braceria" + Libre Bodoni / Work Sans.
   Cambiando solo questo file si ri-tematizza l'intero sito senza toccare markup.
   ============================================================================ */

/* ---- Font self-hosted (woff2 in assets/fonts/) -------------------------- */
@font-face {
  font-family: "Anton";
  src: url("../fonts/AntonRegular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSansRegular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSansBold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSansExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colori (1:1 con content.json theme.colors) — Chill Out ---------- */
  --color-primary:         #ED2E35;   /* rosso — CTA, accento "CHILL OUT"    */
  --color-secondary:       #262624;   /* near-black                          */
  --color-accent:          #ED2E35;   /* rosso — stelle, dettagli            */
  --color-heading:         #262624;
  --color-heading-on-dark: #FFFFFF;
  --color-text:            #2E2D2B;
  --color-text-on-dark:    #EDEDED;
  --color-text-muted:      #6A6864;   /* AA su crema (≥4.9:1)                */
  --color-bg:              #FAF5F1;   /* crema — sfondo brand                */
  --color-bg-alt:          #F1E9E1;   /* crema più caldo — sezioni alternate */
  --color-bg-dark:         #262624;
  --color-link:            #ED2E35;
  --color-link-hover:      #C41F25;
  --color-border:          rgba(38, 38, 36, 0.15);
  --color-shadow:          rgba(38, 38, 36, 0.12);

  /* derivati (calcolati dal builder dai colori sopra) */
  --color-primary-soft:    rgba(237, 46, 53, 0.10);
  --color-overlay-dark:    rgba(20, 19, 18, 0.55);   /* gradiente sull'hero  */

  /* ---- Tipografia (1:1 con content.json theme.fonts) ------------------- */
  --font-heading: "Anton", "Arial Narrow", Impact, system-ui, sans-serif;
  --font-body:    "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* scala tipografica fluida (mobile → desktop) */
  --fs-300: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --fs-400: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --fs-500: clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);
  --fs-600: clamp(1.45rem, 1.25rem + 1.00vw, 2.05rem);
  --fs-700: clamp(1.90rem, 1.50rem + 2.00vw, 3.00rem);
  --fs-800: clamp(2.50rem, 1.80rem + 3.50vw, 4.50rem);   /* H1 hero          */

  --lh-tight: 1.12;
  --lh-snug:  1.30;
  --lh-body:  1.65;
}