/* ============================================================================
   TOKENS — Mondi Sommersi Comix Food, Lecce
   ----------------------------------------------------------------------------
   Palette `carta-inchiostro` assegnata nel BRIEF, applicata così com'è.
   L'unica variazione ammessa in modalità `libero` è l'accento preso dal
   marchio: qui è il rosso del cerchio attorno alla X del logo, lo stesso
   misurato sulla fascia del loro sito (rgb(173, 31, 37) in
   riferimento/loro-comportamento.json).

   La combinazione non è un vezzo editoriale: una fumetteria vende pagine
   stampate in nero su carta bianca, e la loro tavola originale di Magnus è
   letteralmente inchiostro su carta.
   ========================================================================= */

:root {
  /* ——— COLORE ————————————————————————————————————————————————————————————— */
  --fondo: #fcfcfc;
  --fondo-alt: #ebebeb;
  --testo: #0a0a0a;
  --testo-tenue: #52545a;      /* 7,4:1 su --fondo */
  --accento: #ad1f25;          /* rosso del marchio — 6,8:1 su --fondo */
  --su-accento: #ffffff;       /* testo di un pulsante, non di una sezione */
  --bordo: #6f7176;            /* 4,8:1 su --fondo: filetto netto, non grigino */

  /* Superficie scura: il pannello Comix Food e il piede. */
  --inchiostro: #0a0a0a;
  --su-scuro: #f4f4f4;         /* 18,9:1 su --inchiostro */
  --su-scuro-tenue: #a8a8a8;   /* 8,3:1 su --inchiostro */
  --bordo-scuro: #3a3a3a;
  /* Il rosso del marchio su fondo nero fa 2,8:1: illeggibile. Questa è la
     sua versione da fondo scuro (5,0:1), e resta comunque per occhielli e
     titoli — mai per il corpo del testo. */
  --accento-chiaro: #e8434a;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Bebas Neue + Barlow, assegnati nel BRIEF. Il <link> dei Google Fonts in
     testa a index.html porta esattamente questa coppia.
     Scala `compatto-tecnico`: copiata dal BRIEF, non ricalcolata. */
  --font-titoli: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-testo: 'Barlow', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(0.9375rem, 0.91rem + 0.14vw, 1.0625rem);
  --t-piccolo: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-h4: clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
  --t-h3: clamp(1.1875rem, 1.12rem + 0.35vw, 1.5rem);
  --t-h2: clamp(1.5rem, 1.35rem + 0.75vw, 2.125rem);
  --t-h1: clamp(2rem, 1.55rem + 2.2vw, 3.5rem);

  --interlinea: 1.5;
  --interlinea-titoli: 1.15;
  --spaziatura-titoli: -0.005em;

  /* ——— RESPIRO ————————————————————————————————————————————————————————————
     Asse `alternato`: valore ampio di base, .u-sezione--fitta sulle sezioni
     dense (la vetrina dei reparti, il pannello food, i contatti). */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --spazio-blocco: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

  --larghezza-max: 78rem;
  --larghezza-lettura: 36rem;

  /* ——— FORMA ——————————————————————————————————————————————————————————————
     Asse `spigolo`: raggio zero ovunque, filetto da un pixel, nessuna ombra. */
  --raggio: 0;
  --raggio-interattivo: 0;
  --bordo-spessore: 1px;
  --ombra: none;

  /* ——— MOVIMENTO ——————————————————————————————————————————————————————————
     Asse `riservato`: reveal all'ingresso e stati hover. Nient'altro. */
  --durata: 320ms;
  --durata-breve: 160ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}