/* ===========================================================================
   FONDAMENTI — variabili di disegno
   ---------------------------------------------------------------------------
   Questo file e' l'unico posto in cui vivono valori grezzi (colori, misure,
   tempi). Tutto il resto del disegno usa SOLO le variabili definite qui.
   E' anche la parte destinata a sopravvivere intatta al passaggio agli
   sviluppatori: il progetto vero importera' questo file cosi' com'e'.

   CARATTERI — provenienza e licenza
   ---------------------------------------------------------------------------
   Figtree      — Google Fonts, licenza SIL Open Font License 1.1 (uso libero,
                  anche commerciale, self-hosting consentito).
                  https://fonts.google.com/specimen/Figtree
   Caveat Brush — Google Fonts, licenza SIL OFL 1.1. Usato SOLO per la parola
                  accentata nei titoli (il "POWER" pennellato del brand).
                  https://fonts.google.com/specimen/Caveat+Brush

   Sono sostituti scelti in fase di disegno: il carattere del marchio Hotminds
   e' commerciale e non e' incluso qui. Chi costruira' il prodotto deve
   sostituire le due famiglie qui sotto con quelle licenziate dal cliente e
   auto-ospitarle (l'import remoto e' comodo per la revisione, non per la
   produzione). Le pile di fallback tengono la pagina leggibile anche offline.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;800&family=Caveat+Brush&display=swap');

:root {
  /* --- Famiglie e pesi --------------------------------------------------- */
  --font-titoli: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-testo: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-accento: 'Caveat Brush', 'Segoe Script', cursive;

  --peso-normale: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-nero: 800;

  /* --- Scala tipografica -------------------------------------------------
     Poche misure, nominate per uso. I titoli grandi sono fluidi: si
     rimpiccioliscono da soli sul telefono senza media query. */
  --testo-xs: 0.8125rem;   /* 13px — didascalie, note legali */
  --testo-s: 0.875rem;     /* 14px — etichette, testo secondario */
  --testo-m: 1rem;         /* 16px — testo corrente */
  --testo-l: 1.125rem;     /* 18px — testo introduttivo */
  --testo-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);    /* titolo di scheda */
  --testo-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);  /* titolo di blocco */
  --testo-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);     /* titolo di sezione */
  --testo-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem); /* titolone eroe */

  --interlinea-stretta: 1.05;
  --interlinea-media: 1.3;
  --interlinea-larga: 1.6;

  --spaziatura-lettere-stretta: -0.02em;
  --spaziatura-lettere-larga: 0.12em; /* occhielli in maiuscolo */

  /* --- Colori — nominati per RUOLO, mai per tinta ------------------------
     Tema scuro: e' il tema del marchio, quindi e' il default. Le sezioni
     chiare si ottengono con [data-tema="chiaro"], non riscrivendo i colori. */
  --colore-sfondo: #0E0F0E;
  --colore-sfondo-alt: #151716;        /* fasce alternate nella stessa pagina */
  --colore-superficie: #1B1D1B;        /* schede, righe elenco */
  --colore-superficie-alta: #262926;   /* hover, campi, elementi sollevati */

  --colore-testo: #FFFFFF;
  --colore-testo-attenuato: #A7AEA7;   /* contrasto 7.1:1 sullo sfondo */
  --colore-testo-debole: #71776F;      /* solo per testo non essenziale */

  --colore-primario: #C6F24E;          /* verde acido del marchio */
  --colore-primario-scuro: #AEDA36;    /* hover/pressione */
  --colore-su-primario: #0E0F0E;       /* testo sopra il primario */
  --colore-primario-tenue: rgba(198, 242, 78, 0.14);

  --colore-bordo: rgba(255, 255, 255, 0.14);
  --colore-bordo-forte: rgba(255, 255, 255, 0.32);

  --colore-pericolo: #FF7A7A;
  --colore-pericolo-tenue: rgba(255, 122, 122, 0.14);
  --colore-successo: #6BDE9A;
  --colore-successo-tenue: rgba(107, 222, 154, 0.14);
  --colore-attenzione: #F5C84B;
  --colore-attenzione-tenue: rgba(245, 200, 75, 0.14);
  --colore-info: #7CC4FF;
  --colore-info-tenue: rgba(124, 196, 255, 0.14);

  --colore-focus: #C6F24E;             /* anello di focus, sempre visibile */
  --colore-velo: rgba(6, 7, 6, 0.72);  /* fondale delle finestre di dialogo */

  /* --- Spaziature — scala unica, usata anche per i gap delle griglie ----- */
  --spazio-2xs: 0.25rem;   /* 4  */
  --spazio-xs: 0.5rem;     /* 8  */
  --spazio-s: 0.75rem;     /* 12 */
  --spazio-m: 1rem;        /* 16 */
  --spazio-l: 1.5rem;      /* 24 */
  --spazio-xl: 2rem;       /* 32 */
  --spazio-2xl: 3rem;      /* 48 */
  --spazio-3xl: 4.5rem;    /* 72 */
  --spazio-4xl: 7rem;      /* 112 — respiro fra sezioni di pagina */

  /* --- Misure di impaginazione ------------------------------------------ */
  --larghezza-contenuto: 1240px;
  --larghezza-testo: 62ch;  /* oltre questa misura la lettura peggiora */
  --altezza-intestazione: 76px;

  /* --- Raggi ------------------------------------------------------------- */
  --raggio-s: 8px;
  --raggio-m: 14px;
  --raggio-l: 24px;
  --raggio-pillola: 999px;

  /* --- Ombre — poche, tutte con la stessa tinta dello sfondo ------------- */
  --ombra-s: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ombra-m: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ombra-l: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* --- Movimento --------------------------------------------------------- */
  --durata-veloce: 120ms;
  --durata-media: 240ms;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Livelli di sovrapposizione ---------------------------------------- */
  --livello-intestazione: 100;
  --livello-tendina: 200;
  --livello-dialogo: 300;
  --livello-notifiche: 400;
}

/* Sezione chiara: stessi ruoli, valori invertiti. Si applica a qualunque
   contenitore con data-tema="chiaro", componenti inclusi. */
[data-tema='chiaro'] {
  --colore-sfondo: #F3F4F1;
  --colore-sfondo-alt: #E9EBE5;
  --colore-superficie: #FFFFFF;
  --colore-superficie-alta: #F3F4F1;

  --colore-testo: #101210;
  --colore-testo-attenuato: #555C55;
  --colore-testo-debole: #83897F;

  --colore-bordo: rgba(16, 18, 16, 0.12);
  --colore-bordo-forte: rgba(16, 18, 16, 0.32);

  --colore-primario-tenue: rgba(148, 194, 30, 0.18);
  --colore-pericolo: #C22E2E;
  --colore-successo: #1E7A4B;
  --colore-attenzione: #8A6300;
  --colore-info: #135E96;
  --colore-focus: #2F3A11;
  --ombra-m: 0 8px 24px rgba(16, 18, 16, 0.1);
  --ombra-l: 0 24px 60px rgba(16, 18, 16, 0.14);
}