/* ============================================================================
   theme.css — TOKEN VISIVI + @font-face
   ----------------------------------------------------------------------------
   Cliente: Lu Tata N'zinu — pizzeria e ristorante di pesce a Otranto.
   UNICO file CSS rigenerato dal builder da `theme.colors` / `theme.fonts`.
   base.css / components.css / motion.css NON si toccano: usano var().
   ============================================================================ */

/* ---- Font self-hosted (woff2 in assets/fonts/) --------------------------- */
/* Cabinet Grotesk → un'unica family, i pesi mappati sui singoli woff2.
   heading = 700/800, body = 400/500 (vedi content.json theme.fonts).         */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-Extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* Kalam → font manoscritto d'accento, usato solo sugli eyebrow (etichette H2). */
@font-face {
  font-family: "Kalam";
  src: url("../fonts/Kalam-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("../fonts/Kalam-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colori (1:1 con content.json theme.colors) ---------------------- */
  --color-primary:         #cf3032;   /* rosso acceso — CTA, accenti caldi   */
  --color-secondary:       #2E2E2F;   /* antracite                           */
  --color-accent:          #A6511B;   /* terracotta — eyebrow, stelle        */
  --color-heading:         #2E2E2F;
  --color-heading-on-dark: #FAF5F0;
  --color-text:            #2E2E2F;
  --color-text-on-dark:    #EDEDED;
  --color-text-muted:      #6B6B6C;
  --color-bg:              #FAF5F0;   /* bianco caldo                        */
  --color-bg-alt:          #F2E9DE;   /* sabbia — sezioni alternate          */
  --color-bg-dark:         #2E2E2F;
  --color-link:            #8D2520;
  --color-link-hover:      #6E1C18;
  --color-border:          rgba(46, 46, 47, 0.15);
  --color-shadow:          rgba(46, 46, 47, 0.10);

  /* derivati (calcolati dal builder dai colori sopra) */
  --color-primary-soft:    rgba(141, 37, 32, 0.10);
  --color-overlay-dark:    rgba(28, 27, 27, 0.72);   /* gradiente sull'hero  */

  /* ---- Tipografia (1:1 con content.json theme.fonts) ------------------- */
  --font-heading: "Cabinet Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Cabinet Grotesk", 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;
}

/* ---- Accento Kalam sugli eyebrow -----------------------------------------
   .eyebrow è definito in base.css (strutturale, non si tocca). Qui lo si
   sovrascrive con specificità 0,1,1 (`body .eyebrow`) così vince anche se
   theme.css è caricato prima di base.css. Cambia solo il glifo: nessun
   impatto sul layout (resta l'inline-block + trattino ::before di base).      */
body .eyebrow {
  font-family: "Kalam", var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--fs-500);
}

/* ---- Claim hero: font manoscritto (Kalam) in bianco -----------------------
   Il claim sopra l'H1 usa il font secondario, in bianco pieno per staccare
   dallo sfondo foto (prima era terracotta in Cabinet, poco leggibile).
   Specificità 0,2,0 (`.hero .hero__claim`) per battere la regola di
   components.css (`.hero__claim`, caricato dopo).                              */
.hero .hero__claim {
  font-family: "Kalam", var(--font-body);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}