/* Token del sito — direzione «F · Pulita» (30.09.2026). Regole d'uso in DESIGN.md (questa cartella).
   I NOMI sono quelli del prototipo (le demo e le pagine interne li usano): cambiano i valori.
   Nessun colore, spazio, raggio o durata scritto a mano fuori da questo file. */
:root {
  /* ── colore: neutri ── */
  --fondo: #EEEFEC;          /* cemento: il fondo di ogni pagina */
  --carta: #FFFFFF;          /* pannelli e fogli */
  --superficie: #FFFFFF;     /* = carta (nome storico, lo usano le demo) */
  --superficie-2: #F5F6F3;   /* fondi secondari dentro un pannello: intestazioni di tabella, righe «voi» */
  --superficie-3: #E3E5E0;   /* tavolo: segnaposto pieni, barre neutre, fondo dietro le foto */
  --tavolo: #E3E5E0;
  --tratto: #B9BDB6;         /* bordi dei controlli, filetti che separano righe importanti */
  --tratto-chiaro: #D5D8D2;  /* filetti tra le righe, celle */
  --linea: #D5D8D2;          /* filetti interni (tenue: niente più bordi neri) */
  --linea-tenue: #E6E8E3;    /* carta millimetrata, righe secondarie */
  --inchiostro: #121413;     /* testo; 17:1 sul fondo */
  --grafite: #474B48;        /* testo secondario; 8:1 sul fondo */
  --grigio: #5F635E;         /* note, numerazioni; 5.6:1 sul fondo */
  --su-inchiostro: #FFFFFF;
  --su-scuro: #FFFFFF;       /* = su-inchiostro (nome storico) */
  --su-scuro-tenue: #C4C8C1; /* testo secondario su inchiostro */
  --tratteggio: #B9BDB6;     /* bordi generati, foto segnaposto */

  /* ── colore: arancio. Solo Prenota, il campo della chiusura, il segno del marchio,
        piccoli dettagli delle icone e (nelle demo) il dato che conta. Testo sopra: sempre inchiostro (6:1). ── */
  --accento: #FF5B1A;
  --accento-passaggio: #F04E0F; /* Prenota al passaggio, testo inchiostro 5.3:1 */
  --accento-scuro: #F04E0F;     /* nome storico dello stesso valore */
  --accento-tenue: #FFE3D5;     /* solo dentro le demo: evidenziare un dato appena arrivato */
  --accento-fondo: #FFF3EC;     /* solo dentro le demo */
  --accento-velo: rgba(255, 91, 26, 0.16);
  --su-accento: #121413;

  /* ── colore: segnaposto dichiarati (non è un accento) ── */
  --segnaposto-fondo: #FFF1A6;
  --segnaposto-bordo: #8C7A1A;
  --segnaposto-testo: #4A3E00;

  --focus: #121413;
  --velo: rgba(18, 20, 19, 0.28);
  --ombra-carta: 0 1px 2px rgba(18, 20, 19, 0.10), 0 10px 24px -14px rgba(18, 20, 19, 0.35);

  /* ── grafici delle demo: la serie che conta usa --accento, il contesto questi grigi ── */
  --grafico-contesto: #A7ABA3;
  --grafico-griglia: #E6E8E3;
  --grafico-base: #9A9E97;
  --grafico-traccia: #F0F1EE;

  /* ── bozze «prima» nelle demo: tema predefinito di un programma di presentazioni.
        Solo dentro gli esempi di bozza, mai nel sito. ── */
  --bozza-blu: #1F4E79;
  --bozza-blu-medio: #2E75B6;
  --bozza-azzurro: #9DC3E6;
  --bozza-grigio: #595959;
  --bozza-linea: #BFBFBF;
  --bozza-rosso: #C00000;
  --bozza-viola: #7030A0;
  --bozza-verde: #00B050;
  --bozza-giallo: #FFC000;

  /* ── raggi per materiale (mai un raggio unico ovunque) ── */
  --r-cella: 2px;            /* celle, miniature disegnate */
  --r-carta: 4px;            /* fogli: e-mail, offerte, slide, documenti dentro le demo */
  --r-segno: 4px;            /* il segno del marchio */
  --r-piccolo: 8px;          /* etichette, cartellini, campi piccoli */
  --r-controllo: 12px;       /* bottoni, Prenota, menu, campi dei moduli: tutti uguali */
  --r-pannello: 20px;        /* pannelli bianchi sul cemento (16 sul telefono) */
  --r-campo: 28px;           /* grandi campi: il campo arancio, le foto grandi (20 sul telefono) */
  --r: var(--r-controllo);   /* nome storico */

  /* ── tipografia: solo Archivo ── */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-testo: var(--font);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* solo dati dentro le demo (codici, URL, colori) */
  --stretto: 72%;            /* titoli a manifesto */
  --semistretto: 86%;        /* titoli piccoli (area, passo, schede), menu del telefono */
  --largo: var(--stretto);   /* nome storico: ora i titoli sono stretti */
  --font-bozza: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-bozza-grazie: Georgia, "Times New Roman", serif;

  --t-poster: clamp(2.75rem, 0.9rem + 7.6vw, 8.5rem);      /* H1 della home */
  --t-apertura: var(--t-poster);
  --t-pagina: clamp(2.75rem, 1.1rem + 5.2vw, 6.25rem);     /* H1 delle pagine interne */
  --t-h2: clamp(2.5rem, 1.3rem + 4.2vw, 5.5rem);           /* titoli di sezione */
  --t-h3: clamp(1.5rem, 1.15rem + 1.3vw, 2.5rem);
  --t-area: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  --t-passo: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --t-chiusura: clamp(2.75rem, 0.9rem + 6.4vw, 7.5rem);    /* titolo della chiusura, pagine interne */
  --t-manifesto: clamp(3.25rem, 0.6rem + 12.4vw, 13.5rem); /* titolo della chiusura della home */
  --t-grande: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --t-medio: 1.0625rem;      /* 17 px */
  --t-corpo: 1rem;           /* 16 px */
  --t-piccolo: 0.9375rem;    /* 15 px */
  --t-mini: 0.875rem;        /* 14 px */
  --t-micro: 0.8125rem;      /* 13 px */
  --t-etichetta: 0.8125rem;  /* 13 px, grotesk (non più monospazio maiuscolo) */
  --t-nano: 0.6875rem;       /* 11 px, solo dati dentro le demo */
  --t-contatore: 2.25rem;
  --t-contatore-stretto: 1.625rem;
  --t-dato-grande: 1.75rem;
  --t-freccia: 1.5rem;

  /* slide del deck: misure in cqi di una tela fissa da 1040 px, poi scalata (transform: scale) */
  --sl-tela: 1040px;
  --sl-f-titolo: 3.5cqi;
  --sl-f-testo: 1.85cqi;
  --sl-f-piccolo: 1.4cqi;
  --sl-f-etichetta: 1.1cqi;
  --sl-f-dato: 5.2cqi;
  --sl-f-marchio: 7.6cqi;
  --sl-f-sottotitolo: 2.5cqi;
  --sl-f-dato-medio: 4.2cqi;
  --sl-f-grande: 8cqi;
  --sl-titolo: var(--sl-f-titolo);
  --sl-testo: var(--sl-f-testo);
  --sl-piccolo: var(--sl-f-piccolo);
  --sl-etichetta: var(--sl-f-etichetta);
  --sl-dato: var(--sl-f-dato);
  --sl-marchio: var(--sl-f-marchio);
  --sl-sottotitolo: var(--sl-f-sottotitolo);
  --sl-dato-medio: var(--sl-f-dato-medio);
  --sl-grande: var(--sl-f-grande);
  --sl-pad: 4cqi;
  --sl-pad-lato: 4.6cqi;
  --sl-spazio: 2.4cqi;

  --interlinea-stretta: 0.92;
  --interlinea-titolo: 1.04;
  --interlinea-corpo: 1.55;
  --tracking-poster: -0.025em;
  --tracking-titolo: -0.025em;
  --tracking-etichetta: 0;

  /* ── spazio (base 4) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;

  --sezione-spazio: clamp(72px, 7.5vw, 112px);
  --margine: clamp(16px, 3.4vw, 48px);
  --gap: 24px;
  --larghezza: 1280px;

  /* ── forma: filetti tenui da 1 px, nessun bordo nero ── */
  --bordo: 1px solid var(--linea);
  --bordo-forte: 1px solid var(--tratto);   /* storico «bordo nero»: ora un filetto grigio */
  --bordo-spesso: 1px solid var(--tratto);  /* storico «2 px nero»: niente filetti spessi */
  --segno-spessore: 3px;

  /* ── movimento ── */
  --d-breve: 150ms;
  --d-veloce: 150ms;
  --d-corta: 150ms;
  --d-media: 250ms;
  --d-lenta: 400ms;
  --d-tendina: 900ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-tendina: cubic-bezier(0.65, 0, 0.25, 1);
  --macchina-durata: 6200ms;
  --d-grafico: 700ms;
  --d-giorno: 170ms;
  --d-scena: 850ms;

  --tocco: 44px;
  --testata-altezza: 72px;
}

/* Telefono (sotto 700 px): un blocco per schermata */
@media (max-width: 700px) {
  :root {
    --testata-altezza: 64px;
    --sezione-spazio: 72px;
    --gap: 16px;
    --r-campo: 20px;
    --r-pannello: 16px;
    --t-pagina: 2.75rem;       /* 44 px */
    --t-chiusura: 2.75rem;
    --t-manifesto: clamp(3.25rem, 0.6rem + 12.4vw, 4rem);
  }
}