/* Pamphlet — design token (direzione A "Catalogo"). Fonte unica per il frontend.
   Regole d'uso in wiki/concetti/design-system.md. Mondo unico chiaro (carta e inchiostro): niente tema scuro
   nella Fase 1, è una scelta, non una dimenticanza. */

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Hanken+Grotesk:wght@400;500;600&display=swap");

:root {
  color-scheme: light;

  /* ---------- Colore: l'interfaccia è bianco e nero, il colore lo mettono le locandine ---------- */
  --carta: #ffffff;          /* sfondo */
  --inchiostro: #000000;     /* testo, marchio, pulsante principale */
  --nota: #6b6b6b;           /* testo secondario: 5,3:1 su carta (AA) */
  --filo: #dadada;           /* separatori indispensabili, bordi dei campi */
  --velo: #f2f2f2;           /* fondo di stati premuti, segnaposto delle locandine */
  --errore: #b3001b;         /* solo messaggi d'errore: 7,4:1 su carta */
  /* I colori dei giudizi arriveranno con il nuovo trattamento dei timbri (da riprogettare). */

  /* ---------- Caratteri ---------- */
  --font-marchio: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;   /* marchio e titoli editoriali */
  --font-ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;      /* tutto il resto */

  /* Scala (px): ogni dimensione ha un ruolo, non se ne usano altre */
  --t-micro: 11.5px;     /* didascalie nella griglia a 3 */
  --t-meta: 12.5px;      /* anno, piattaforma sotto le locandine */
  --t-ui: 14px;          /* navigazione, filtri, pulsanti */
  --t-corpo: 15px;       /* testi lunghi (trama, privacy) */
  --t-titolo-s: 20px;    /* titoli di blocchi nella scheda film */
  --t-titolo-m: 34px;    /* titolo di pagina/sezione in Bodoni */
  --t-titolo-l: clamp(34px, 10vw, 56px);  /* titolo del film nella scheda, in Bodoni */
  /* Il marchio PAMPHLET non ha una dimensione fissa: occupa esattamente la larghezza della colonna
     (calcolata in JavaScript) e si legge sempre per intero. */

  --peso-normale: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --interlinea-stretta: 1.05;
  --interlinea-ui: 1.3;
  --interlinea-corpo: 1.55;

  /* ---------- Spazi (base 4) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;   /* margine laterale della pagina */
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --gutter: var(--s-4);

  /* ---------- Griglia delle locandine ---------- */
  --locandina: 2 / 3;              /* proporzione standard delle locandine */
  --griglia-2-righe: var(--s-5);   /* spazio verticale tra righe, densità 2 */
  --griglia-2-colonne: var(--s-3); /* 12 px: separa bene i testi di colonne vicine (critica) */
  --griglia-3-righe: 18px;
  --griglia-3-colonne: var(--s-2);
  --griglia-4: 3px;                /* densità 4: solo immagini, quasi a contatto, come Zara */

  /* ---------- Forme ---------- */
  --raggio: 0;                     /* niente angoli arrotondati: carta stampata */
  --bordo: 1px solid var(--filo);
  --bordo-forte: 1px solid var(--inchiostro);
  --focus: 2px solid var(--inchiostro);
  --focus-offset: 2px;
  --tocco-min: 44px;               /* area minima di tocco (critica: i pulsanti 2/3/4 erano 32 px) */

  /* ---------- Movimento: solo in risposta a un gesto ---------- */
  --durata-breve: 150ms;           /* cambi di stato (premuto, selezionato) */
  --durata-media: 250ms;           /* apertura della scheda film dal basso */
  --curva: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --durata-breve: 0ms; --durata-media: 0ms; }
}

html, body { background: var(--carta); color: var(--inchiostro); }
body { margin: 0; font: var(--peso-normale) var(--t-ui) / var(--interlinea-ui) var(--font-ui); }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }