/* ============================================================================
   LeadSpark — identità del sito pubblico. FONTE UNICA dei token.
   Usata da: home.html, blog.html, login.html, pricing.html, thank-you.html

   La regola che tiene insieme tutto: L'INCHIOSTRO È LA VOCE DELLA PIATTAFORMA,
   LA CARTA È CIÒ CHE IL PRODOTTO CONSEGNA. Bozze, verdetti, pratiche,
   preventivi e messaggi appaiono SEMPRE su `--foglio`, anche dentro una fascia
   scura — per questo `.foglio` fissa fondo e testo espliciti invece di
   ereditarli: in tema scuro la regola deve reggere identica.

   Prima di questo file i token erano ricopiati a mano dentro ogni pagina, e
   cambiarne uno significava trovarli tutti. Qui si cambiano una volta sola.
============================================================================ */

:root{
  /* ── Pigmenti ─────────────────────────────────────────────────────────── */
  --carta:#F1F1ED;          /* fondo pagina: neutro, appena freddo */
  --carta-2:#E7E7E1;        /* fascia alternata */
  --foglio:#FDFDFB;         /* il foglio: ciò che il prodotto consegna */
  --inchiostro:#141C26;     /* testo, e fondo delle fasce scure */
  --inchiostro-2:#4A5665;   /* testo secondario su carta */
  --chiaro:#ECECE6;         /* testo su inchiostro */
  --chiaro-2:#9AA6B4;       /* testo secondario su inchiostro */
  --velo:#CFCFC7;           /* filetti del registro, su carta */
  --velo-forte:#85877D;     /* bordi di componenti (3.2:1, WCAG 1.4.11) */
  --velo-scuro:#2C3846;     /* filetti su inchiostro */
  --velo-scuro-forte:#6B7684;
  --ottone:#8A5E19;         /* UNICO accento: l'azione, i link, «idonea» */
  --ottone-p:#6E4A13;       /* pressione */
  --ottone-c:#D3A34A;       /* lo stesso accento sul fondo scuro */
  --ottone-c-p:#E4B863;
  --ottone-velo:rgba(138,94,25,.10);

  /* ── Ruoli (l'unica cosa che il tema scuro rimappa) ───────────────────── */
  --fondo:var(--carta);
  --fondo-2:var(--carta-2);
  --testo:var(--inchiostro);
  --testo-2:var(--inchiostro-2);
  --filetto:var(--velo);
  --filetto-forte:var(--velo-forte);
  --azione:var(--ottone);
  --azione-p:var(--ottone-p);
  --su-azione:var(--foglio);
  --azione-velo:var(--ottone-velo);

  /* ── Tipografia ───────────────────────────────────────────────────────── */
  --f-tit:'Sentient',Georgia,'Times New Roman',serif;
  --f-testo:'General Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* ── Misure ───────────────────────────────────────────────────────────── */
  --wrap:1240px;
  --corsia:200px;           /* la corsia sinistra: nome di sezione e note */
  --r-foglio:2px;           /* la carta ha un angolo appena smussato */
  --r-btn:4px;              /* i pulsanti, un filo di più. Nient'altro ha raggi */
  --superficie:#FAFAF7;     /* carta rialzata che segue il tema */
  --superficie-2:#F4F4F0;
  --ombra-foglio:0 1px 0 rgba(20,28,38,.04), 0 10px 28px -18px rgba(20,28,38,.35);
}

[data-theme="dark"]{
  --fondo:var(--inchiostro);
  --fondo-2:#0F1620;
  --testo:var(--chiaro);
  --testo-2:var(--chiaro-2);
  --filetto:var(--velo-scuro);
  --filetto-forte:var(--velo-scuro-forte);
  --azione:var(--ottone-c);
  --azione-p:var(--ottone-c-p);
  --su-azione:var(--inchiostro);
  --azione-velo:rgba(211,163,74,.14);
  --superficie:#1B242F; --superficie-2:#222C38;
  --ombra-foglio:0 1px 0 rgba(0,0,0,.20), 0 14px 34px -18px rgba(0,0,0,.70);
}

/* Senza JavaScript nessuno scrive `data-theme`: qui il tema di sistema. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:var(--inchiostro); --fondo-2:#0F1620;
    --testo:var(--chiaro); --testo-2:var(--chiaro-2);
    --filetto:var(--velo-scuro); --filetto-forte:var(--velo-scuro-forte);
    --azione:var(--ottone-c); --azione-p:var(--ottone-c-p);
    --su-azione:var(--inchiostro); --azione-velo:rgba(211,163,74,.14);
    --superficie:#1B242F; --superficie-2:#222C38;
    --ombra-foglio:0 1px 0 rgba(0,0,0,.20), 0 14px 34px -18px rgba(0,0,0,.70);
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--fondo);color:var(--testo);
  font-family:var(--f-testo);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-tit);font-weight:400;letter-spacing:-.015em;line-height:1.14}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--azione-velo);color:var(--testo)}

/* Un solo anello di focus per tutto il sito pubblico. */
:focus-visible{outline:2px solid var(--azione);outline-offset:2px;border-radius:1px}

/* ── Primitive condivise ───────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--r-btn);cursor:pointer;
  font-family:var(--f-testo);font-size:.95rem;font-weight:600;line-height:1;
  padding:14px 22px;transition:background .18s,border-color .18s,color .18s;
  text-align:center;
}
.btn-p{background:var(--azione);color:var(--su-azione)}
.btn-p:hover{background:var(--azione-p)}
.btn-s{background:transparent;color:var(--testo);border-color:var(--filetto-forte)}
.btn-s:hover{border-color:var(--testo);background:var(--azione-velo)}
.btn-sm{padding:9px 14px;font-size:.86rem}

/* Il foglio: fondo e testo ESPLICITI, mai ereditati — vale anche dentro una
   fascia scura, dove il resto del testo è chiaro. */
.foglio{
  background:var(--foglio);color:var(--inchiostro);
  border:1px solid var(--velo);border-radius:var(--r-foglio);
  box-shadow:var(--ombra-foglio);
}
.foglio a:not(.btn){color:var(--ottone)}
/* Un pulsante dentro il foglio resta un pulsante: senza queste tre righe
   `.foglio a` (0,2,0) batte `.btn-p` (0,1,0) e scrive ottone su ottone —
   testo invisibile. In tema scuro succedeva anche a `.btn-s`, che ereditava
   il testo chiaro su carta chiara. */
.foglio .btn-p{background:var(--ottone);color:var(--foglio)}
.foglio .btn-p:hover{background:var(--ottone-p)}
.foglio .btn-s{color:var(--inchiostro);border-color:var(--velo-forte)}
.foglio .btn-s:hover{border-color:var(--inchiostro);background:var(--ottone-velo)}

/* La nota a margine dell'agente: corsivo del serif, non decorazione — è la
   voce di chi ha deciso. */
.nota{font-family:var(--f-tit);font-style:italic;color:var(--testo-2);line-height:1.4}
.foglio .nota{color:var(--inchiostro-2)}

.link{color:var(--azione);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--azione-velo)}
.link:hover{text-decoration-color:currentColor}

.salta{position:absolute;left:-9999px;top:0;background:var(--foglio);color:var(--inchiostro);
  padding:12px 18px;z-index:999;border:1px solid var(--velo-forte)}
.salta:focus{left:12px;top:12px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ── Ponte per le pagine scritte con i nomi «Mission Control» ───────────────
   blog.html, login.html, pricing.html e thank-you.html sono ancora scritte con
   --ink, --lime, --text, --card… Riscrivere centinaia di regole per cambiare
   identità sarebbe stato un lavoro rischioso e invisibile: qui i nomi vecchi
   diventano ALIAS dei ruoli nuovi. Così quelle pagine cambiano identità per
   costruzione, seguono il tema senza avere un blocco scuro proprio, e il
   ponte si potrà togliere quando saranno riscritte con i nomi nuovi.

   Le tre variabili che valevano un effetto (--grad, --mesh-*, --grain-op) non
   vengono rimappate ma SPENTE: testo in gradiente, sfere sfocate e grana sono
   proprio ciò da cui questa identità si allontana. */
:root{
  --ink:var(--fondo); --ink-1:var(--superficie); --ink-2:var(--superficie); --ink-3:var(--superficie-2);
  --text:var(--testo); --text-2:var(--testo-2); --text-3:var(--testo-2);
  --line:var(--filetto); --line-2:var(--filetto-forte);
  --lime:var(--azione); --lime-1:var(--azione-p); --lime-deep:var(--azione-p);
  --lime-soft:var(--azione-velo);
  --ember:var(--azione); --ember-1:var(--azione-p); --ember-soft:var(--azione-velo);
  --on-accent:var(--su-azione);
  --card:var(--superficie); --card-h:var(--superficie-2);
  --nav-bg:var(--fondo); --nav-bg-solid:var(--fondo); --glass:var(--superficie);
  --f-disp:var(--f-tit); --f-body:var(--f-testo);
  --maxw:var(--wrap);
  --shadow:var(--ombra-foglio); --shadow-pop:var(--ombra-foglio);
  --grad:linear-gradient(0deg,var(--azione),var(--azione));
  --mesh-1:transparent; --mesh-2:transparent; --mesh-3:transparent; --grain-op:0;
}