/* ============================================================================
   TOKENS — Fernando Hairdesigner Lecce
   ----------------------------------------------------------------------------
   Palette dal logo reale (loghi/logo.jpg): wordmark serif "FERNANDO" in un
   bordeaux/terracotta scuro su fondo crema. Il salvia entra come secondario
   desaturato, coerente con la direzione morbida assegnata nel BRIEF quando
   il logo non basta a coprire ogni superficie.
   ========================================================================= */

:root {
  /* ——— COLORE ——————————————————————————————————————————————————————————— */
  --fondo: #f8f2e6;            /* crema, dal fondo del logo */
  --fondo-alt: #efe2c9;        /* crema più densa: superfici delle sezioni fitte */
  --testo: #2a2119;            /* quasi nero caldo, mai nero puro */
  --testo-tenue: #6b5d4d;
  --accento: #6d2c22;          /* bordeaux del wordmark: CTA, link, titoli */
  --accento-scuro: #4a1d17;
  --su-accento: #f8f2e6;       /* testo crema sopra --accento */
  --salvia: #8fa178;           /* secondario desaturato: tag, note, dettagli */
  --bordo: color-mix(in srgb, var(--testo) 14%, transparent);

  /* ——— TIPOGRAFIA ——————————————————————————————————————————————————————— */
  --font-titoli: 'Playfair Display', Georgia, serif;
  --font-testo: 'Karla', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-piccolo: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
  --t-h4: clamp(1.2rem, 1.1rem + 0.45vw, 1.625rem);
  --t-h3: clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);
  --t-h2: clamp(2.25rem, 1.5rem + 3.6vw, 4.75rem);
  --t-h1: clamp(3rem, 1.6rem + 7vw, 8rem);

  --interlinea: 1.65;
  --interlinea-titoli: 1.04;
  --spaziatura-titoli: -0.01em;

  /* ——— RESPIRO: alternato ——————————————————————————————————————————————— *
     Il valore ampio qui sotto è la sezione "vuota" dell'alternanza; le
     sezioni dense usano .u-sezione--fitta (già nel pavimento, -55%). */
  --spazio-sezione: clamp(5rem, 3.5rem + 7vw, 11rem);
  --spazio-blocco: clamp(1.5rem, 1rem + 2vw, 3rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

  --larghezza-max: 76rem;
  --larghezza-lettura: 38rem;

  /* ——— FORMA: morbida —————————————————————————————————————————————————— */
  --raggio: 1.75rem;
  --raggio-interattivo: 999px;
  --bordo-spessore: 0px;
  --ombra: 0 30px 70px -35px rgba(42, 33, 25, 0.45);

  /* ——— MOVIMENTO ——————————————————————————————————————————————————————— */
  --durata: 450ms;
  --durata-breve: 200ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}