/*
 * VARIABILI DI STILE (design tokens) di elisaarvati.com
 *
 * Questo è l'UNICO file in cui si scrivono colori, caratteri, dimensioni,
 * spaziature e angoli. Tutto il resto del sito (global.css, componenti,
 * pagine) usa solo i nomi delle variabili qui sotto: per cambiare la
 * grafica basta cambiare un valore qui.
 *
 * Origine dei valori: bozza di Claude Design, "Identita visiva Elisa
 * Arvati" + "Homepage" (docs/design/claude-design/). Spiegazione leggibile
 * e tabella dei contrasti: docs/design/design-tokens.md.
 *
 * Correzioni rispetto alla bozza (per leggibilità, decise il 01/11/2026):
 *  - pulsanti: fondo turchese profondo invece del turchese chiaro (scelta di
 *    Max: il testo bianco sul turchese chiaro aveva contrasto 2,5:1);
 *  - oro scuro degli occhielli: da #8A7140 a #7A6338 (4,45:1 -> 5,48:1);
 *  - date e testi segnaposto: da #8E8670 a #6E6551 (3,47:1 -> 5,52:1);
 *  - bordo dei campi dei moduli: da #CFC6B2 a #8E8670, più visibile.
 * L'oro Denteam (#C2A772) NON è leggibile come testo (2,2:1): si usa solo
 * per decorazioni (punto della firma, virgolette, filetti, sottolineature).
 */

:root {
  /* ===================== COLORI DI BASE (palette) ===================== */

  /* Turchesi */
  --turchese: #13b5c5;          /* Turchese Denteam (dal logo): monogramma, filetti, pallini. MAI come fondo di testo bianco */
  --turchese-profondo: #0b7f8c; /* Link, corsivi nei titoli, fondo dei pulsanti */
  --turchese-scuro: #08646e;    /* Hover di link e pulsanti; link su fondi avorio e velato */
  --turchese-velato: #e3f4f6;   /* Fondo della sezione "punto di vista" */

  /* Ori (solo decorazione, tranne l'oro scuro) */
  --oro: #c2a772;               /* Oro Denteam (dal logo): punto della firma, virgolette, sottolineature. MAI per il testo */
  --oro-scuro: #7a6338;         /* Occhielli e numeri in testo piccolo (corretto, vedi sopra) */
  --sabbia: #e8dfc9;            /* Accenti chiari su fondo bruno */

  /* Bruni (testo) */
  --bruno: #4a4129;             /* Bruno Denteam (dal logo): titoli, testo, sezione di chiusura */
  --bruno-profondo: #2b2618;    /* Testo molto scuro (riserva) */
  --testo-secondario: #5c5340;  /* Paragrafi lunghi, sottotitoli */
  --testo-didascalia: #6e6551;  /* Metadati, date, note, segnaposto */

  /* Fondi e linee */
  --carta: #fbfaf7;             /* Fondo pagina */
  --bianco: #ffffff;            /* Fondo schede testimonianza e campi dei moduli */
  --avorio: #f5f0e6;            /* Sezioni alterne, piè di pagina */
  --linea: #e8e1d3;             /* Filetti e bordi su carta */
  --linea-su-avorio: #ddd3bf;   /* Filetti e bordi su avorio */
  --bordo-campo: #8e8670;       /* Bordo dei campi dei moduli */
  --tratteggio-1: #ede8dd;      /* Righe dei riquadri segnaposto per foto */
  --bruno-tratteggio-1: #554b33;/* Righe del segnaposto video (su bruno) */
  --bruno-tratteggio-2: #4f462f;
  --testo-su-bruno-tenue: #d9d0bc; /* Didascalie su fondo bruno */

  /* Stati */
  --errore: #a2452f;            /* Messaggi di errore nei moduli */

  /* ===================== RUOLI (cosa usare dove) ===================== */
  --colore-fondo: var(--carta);
  --colore-testo: var(--bruno);
  --colore-link: var(--turchese-profondo);
  --colore-link-hover: var(--turchese-scuro);
  --colore-accento: var(--turchese-profondo);  /* corsivi colorati nei titoli */
  --colore-occhiello: var(--oro-scuro);
  --colore-decoro: var(--oro);
  --colore-focus: var(--turchese-profondo);    /* contorno di tastiera */

  --pulsante-fondo: var(--turchese-profondo);
  --pulsante-fondo-hover: var(--turchese-scuro);
  --pulsante-testo: var(--bianco);

  /* ===================== CARATTERI ===================== */
  /* Newsreader per titoli e citazioni, Hanken Grotesk per il testo.
     Ospitati sul nostro server (pacchetti @fontsource), mai da Google. */
  --font-titoli: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-testo: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --peso-leggero: 300;   /* Newsreader: citazioni grandi, titolo di chiusura */
  --peso-normale: 400;   /* Newsreader: titoli; Hanken: testo */
  --peso-medio: 500;     /* Hanken: navigazione */
  --peso-forte: 600;     /* Hanken: pulsanti, occhielli, etichette */

  /* Dimensioni: clamp(minimo su telefono, crescita, massimo su desktop).
     I valori minimo/massimo sono quelli della bozza (mobile 390 / desktop 1440). */
  --testo-display: clamp(2.75rem, 1.6rem + 3.6vw, 4.875rem);   /* 44 -> 78 px, titolo della home */
  --testo-citazione-grande: clamp(2.5rem, 0.9rem + 5.4vw, 6rem); /* 40 -> 96 px */
  --testo-h2: clamp(2.125rem, 1.4rem + 2.4vw, 3.75rem);       /* 34 -> 60 px */
  --testo-h2-chiusura: clamp(2.375rem, 1.1rem + 4.1vw, 5rem);  /* 38 -> 80 px */
  --testo-h3: clamp(1.625rem, 1.4rem + 0.6vw, 2rem);          /* 26 -> 32 px */
  --testo-scheda: 1.5625rem;      /* 25 px, titolo scheda articolo */
  --testo-citazione: 1.375rem;    /* 22 px, citazioni nelle schede */
  --testo-numero-grande: clamp(5rem, 2.6rem + 8vw, 10rem);    /* 80 -> 160 px, "300+" */
  --testo-numero-didascalia: clamp(1.375rem, 1.1rem + 0.9vw, 2rem); /* 22 -> 32 px */
  --testo-lead: clamp(1.125rem, 1rem + 0.3vw, 1.3125rem);     /* 18 -> 21 px */
  --testo-base: clamp(1rem, 0.96rem + 0.1vw, 1.0625rem);      /* 16 -> 17 px */
  --testo-piccolo: 1rem;          /* 16 px, estratti delle schede */
  --testo-pulsante: 0.9375rem;    /* 15 px, pulsanti e navigazione */
  --testo-didascalia-dim: 0.875rem; /* 14 px */
  --testo-nota: 0.8125rem;        /* 13 px, dati legali nel piè di pagina */
  --testo-occhiello: 0.75rem;     /* 12 px, MAIUSCOLO spaziato */
  --testo-tappa: 1.3125rem;       /* 21 px, tappe del percorso del paziente */
  --testo-numero-area: 1.125rem;  /* 18 px, numeri romani delle aree */
  --testo-virgolette: 3.5rem;     /* 56 px, virgolette oro delle testimonianze */
  --testo-h2-libro: clamp(2rem, 1.4rem + 2vw, 3.25rem);           /* 32 -> 52 px */
  --testo-copertina-occhiello: 0.6875rem;                         /* 11 px */
  --testo-copertina-titolo: clamp(1.875rem, 1.5rem + 1.2vw, 2.375rem); /* 30 -> 38 px */
  --testo-copertina-autrice: 1.125rem;                            /* 18 px */

  --interlinea-titoli: 1.05;
  --interlinea-citazioni: 1.3;
  --interlinea-testo: 1.6;
  --spaziatura-titoli: -0.02em;   /* tracking leggermente stretto */
  --spaziatura-display: -0.025em;
  --spaziatura-occhiello: 0.16em; /* +16% */

  /* ===================== SPAZIATURE ===================== */
  /* Scala della bozza: 8 · 16 · 24 · 32 · 48 · 64 · 96 */
  --spazio-1: 0.5rem;  /*  8 px */
  --spazio-2: 1rem;    /* 16 px */
  --spazio-3: 1.5rem;  /* 24 px */
  --spazio-4: 2rem;    /* 32 px */
  --spazio-5: 3rem;    /* 48 px */
  --spazio-6: 4rem;    /* 64 px */
  --spazio-7: 6rem;    /* 96 px */

  /* Spazi di rifinitura (usati dalla bozza dentro schede e moduli) */
  --spazio-4px: 0.25rem;
  --spazio-6px: 0.375rem;
  --spazio-10px: 0.625rem;
  --spazio-12px: 0.75rem;
  --spazio-14px: 0.875rem;
  --spazio-18px: 1.125rem;
  --spazio-20px: 1.25rem;
  --spazio-28px: 1.75rem;

  --larghezza-max: 80rem;          /* 1280 px, colonna del contenuto */
  --larghezza-testo: 42rem;        /* colonna di lettura degli articoli */
  --margine-laterale: clamp(1.25rem, 5.5vw, 5rem);       /* 20 -> 80 px */
  --spazio-sezione: clamp(4.5rem, 9vw, 8.5rem);          /* 72 -> 136 px, sopra e sotto le sezioni */
  --spazio-blocchi: clamp(2.5rem, 5vw, 4rem);            /* 40 -> 64 px, tra blocchi di una sezione */

  /* ===================== ANGOLI, LINEE, OMBRE ===================== */
  --raggio-piccolo: 2px;   /* pulsanti, campi (niente "pillole": ci distingue da Denteam) */
  --raggio-medio: 4px;     /* schede, foto */
  --raggio-tondo: 50%;     /* avatar, pulsante play */
  --spessore-linea: 1px;
  --ombra-libro: 18px 24px 48px -16px rgb(74 65 41 / 0.35);

  /* Dimensioni di elementi */
  --altezza-logo: clamp(1.25rem, 1rem + 0.5vw, 1.6rem); /* logotipo nell'intestazione */
  --altezza-logo-pie: 1.65rem;     /* logotipo nel piè di pagina */
  --dim-pallino: 11px;             /* pallini della linea del percorso */
  --dim-avatar: 2.75rem;           /* 44 px, foto tonda nelle testimonianze */
  --dim-play: 4.25rem;             /* 68 px, pulsante play dei video */
  --dim-foto-autrice: 4.5rem;      /* 72 px, foto nella scheda autrice */
  --dim-casella: 1.125rem;         /* 18 px, casella del consenso privacy */
  --larghezza-copertina: 23.75rem; /* 380 px, copertina del libro */

  /* Pulsanti */
  --pulsante-altezza: 3.25rem;     /* 52 px */
  --pulsante-altezza-nav: 2.75rem; /* 44 px */
  --pulsante-padding: 1rem 1.5rem; /* 16 x 24 px */

  /* Intestazione semitrasparente */
  --fondo-intestazione: rgb(251 250 247 / 0.94);
  --linea-su-bruno: rgb(251 250 247 / 0.3);
}