/* ============================================================================
   PIOTAR BOA — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Unico file da modificare per: palette, tipografia, bottoni.
   Va caricato PRIMA di assets/style.css: qui si dichiarano solo variabili,
   nessuna regola di layout.

   Indice
     1. PALETTE ................. 5 colori + derivate (con canali RGB)
     2. TIPOGRAFIA · BASE ....... famiglie, scala titoli, paragrafo
     3. TIPOGRAFIA · COMPONENTI . misure puntuali dei singoli blocchi
     4. BOTTONI ................. forma, colori, hover
     5. MOBILE E TABLET ......... stessi nomi, valori diversi

   Regola d'oro: un token = "--nome:valore;". Il nome non cambia mai, perche'
   il pannello /admin/ scrive esattamente questi nomi. Per distinguere desktop
   e mobile NON si creano nomi nuovi: si ripete lo stesso nome dentro una
   media query, come nella sezione 5.
   ============================================================================ */

/* ==========================================================================
   1. PALETTE
   I primi cinque sono i colori del marchio. Quelli con suffisso -rgb servono
   alle trasparenze rgba() e vanno tenuti allineati al colore corrispondente:
   il pannello li aggiorna da solo.
   ========================================================================== */
:root{
  /* --- 1. sfondo --- */
  --color-bg:#01030A;
  --color-bg-rgb:1,3,10;
  /* --- 2. superfici (card, header, footer) --- */
  --color-surface:#06101F;
  --color-surface-rgb:6,16,31;
  /* --- 3. accento primario --- */
  --color-accent:#0066FF;
  --color-accent-rgb:0,102,255;
  /* --- 4. accento secondario --- */
  --color-accent-2:#00B8FF;
  --color-accent-2-rgb:0,184,255;
  /* --- 5. testo --- */
  --color-text:#FFFFFF;
  --color-text-rgb:255,255,255;

  /* --- derivate, modificabili una per una --- */
  --color-overlay:#010610;          /* header e banner sovrapposti */
  --color-overlay-rgb:1,6,16;
  --color-raised:#0A1A33;           /* superficie rialzata */
  --color-accent-mid:#008CFF;       /* accento intermedio, usato nei veli */
  --color-accent-mid-rgb:0,140,255;
  --color-accent-soft:#8AE6FF;      /* accento chiarissimo: hover, occhielli */
  --color-accent-soft-rgb:138,230,255;
  --color-text-soft:#D6E4F5;        /* paragrafi lunghi */
  --color-text-muted:#8EADC8;       /* testi secondari */
  --color-border:#164070;
  --color-border-rgb:22,64,112;
  --color-on-accent:#06264D;        /* testo sopra un fondo accento chiaro */
  --color-on-accent-rgb:6,38,77;

  /* --- terze parti --- */
  --color-whatsapp:#25D366;
  --color-whatsapp-rgb:37,211,102;
  --color-whatsapp-dark:#1FB855;
  --color-whatsapp-ink:#03200F;

  /* --- forma --- */
  --radius:18px;
  --radius-btn:999px;
}

/* ==========================================================================
   2. TIPOGRAFIA · BASE
   La scala che copre la maggior parte del sito: il pannello mostra queste.
   ========================================================================== */
:root{
  --font-display:Jost,system-ui,sans-serif;
  --font-body:"Exo 2",system-ui,sans-serif;

  /* scala titoli */
  --fs-h1:clamp(2.6rem,6.5vw,5rem);
  --fs-h2:clamp(2rem,4.5vw,3.2rem);
  --fs-h3:1.45rem;
  --fs-h4:1rem;

  /* paragrafi e testi */
  --fs-body:1rem;
  --fs-lead:clamp(1.05rem,1.6vw,1.3rem);
  --fs-sub:1.08rem;
  --fs-small:.9rem;
  --fs-micro:.8rem;
  --fs-eyebrow:.82rem;
  --fs-caption:.95rem;

  /* ritmo */
  --lh-heading:1.08;
  --lh-body:1.6;
  --ls-heading:-.02em;
  --fw-h1:800;
  --fw-heading:700;
  --fw-body:400;
  --fw-light:300;
}

/* ==========================================================================
   3. TIPOGRAFIA · COMPONENTI
   Misure specifiche dei singoli blocchi. Servono a non perdere nemmeno un
   pixel rispetto alla versione precedente. Si toccano raramente.
   ========================================================================== */
:root{
  /* struttura */
  --fs-logo:1.15rem;
  --fs-nav:.92rem;
  --fs-lang:.78rem;
  --fs-chip:.88rem;
  --fs-footer:.92rem;
  --fs-footer-title:1rem;
  --fs-final-cta-text:1.1rem;

  /* hero */
  --fs-h1-full:clamp(2.1rem,3.9vw,3.55rem);
  --fs-h1-hero:clamp(1.95rem,3.25vw,3.1rem);

  /* titoli contestuali */
  --fs-h2-brand:clamp(1.5rem,2.6vw,2.1rem);
  --fs-h2-invite:clamp(1.8rem,3.6vw,2.8rem);
  --fs-h2-life:clamp(2.1rem,4.2vw,3.2rem);
  --fs-h2-lp-cta:clamp(1.7rem,3.4vw,2.6rem);
  --fs-h2-press:clamp(1.5rem,2.8vw,2rem);

  /* card delle soluzioni */
  --fs-card-title:clamp(1.3rem,1.9vw,1.75rem);
  --fs-card-list:.97rem;
  --fs-card-list-lg:clamp(.88rem,1vw,.97rem);
  --fs-card-label:.8rem;
  --fs-card-link:.92rem;
  --fs-counter:.78rem;

  /* sezioni della home */
  --fs-step-number:2.4rem;
  --fs-stack-label:.78rem;

  /* pagina invito */
  --fs-sub-invite:1.02rem;
  --fs-invite-icon:1.2rem;
  --fs-invite-strong:1rem;

  /* test: domande e risposte */
  --fs-quiz-count:.86rem;
  --fs-quiz-question:clamp(1.35rem,2.3vw,1.75rem);
  --fs-quiz-help:.93rem;
  --fs-quiz-note:.78rem;
  --fs-quiz-alt:.85rem;
  --fs-quiz-back:.86rem;
  --fs-badge:.68rem;
  --fs-badge-sm:.66rem;
  --fs-answer:.99rem;
  --fs-answer-index:.82rem;
  --fs-answer-label:1.12rem;
  --fs-answer-note:.88rem;

  /* landing del test */
  --fs-h1-lp:clamp(1.9rem,3.6vw,3.4rem);
  --fs-lp-link:.94rem;
  --fs-lp-note:.94rem;
  --fs-lp-note-strong:.98rem;
  --fs-lp-footer:.88rem;
  --fs-trust:.82rem;
  --fs-proof-total:1.02rem;
  --fs-proof-total-strong:1.3rem;
  --fs-proof-note:.74rem;
  --fs-proof-key:.68rem;
  --fs-proof-value:.98rem;

  /* risultato del test */
  --fs-result-kicker:.76rem;
  --fs-result-title:clamp(1.4rem,2.3vw,1.85rem);
  --fs-result-lead:.98rem;
  --fs-result-meta-strong:1.05rem;
  --fs-score:2.3rem;
  --fs-result-h4:1.02rem;
  --fs-result-actions:.96rem;
  --fs-result-cta:clamp(1.2rem,2vw,1.5rem);
  --fs-result-cta-text:.96rem;
  --fs-result-foot:.78rem;

  /* schede consigliate */
  --fs-rec-title:1.03rem;
  --fs-rec-link:.86rem;

  /* servizi */
  --fs-svc-tag:.72rem;
  --fs-svc-title:1.2rem;
  --fs-svc-text:.93rem;
  --fs-svc-link:.88rem;
  --fs-related-text:.98rem;

  /* contenuti */
  --fs-prose:1.12rem;
  --fs-faq-question:1.15rem;
  --fs-life-text:clamp(1.22rem,1.7vw,1.5rem);
  --fs-legal-h2:1.32rem;
  --fs-legal-h3:1.02rem;
  --fs-legal-code:.85em;

  /* pagina press */
  --fs-press-stat:clamp(1.9rem,3.6vw,2.5rem);
  --fs-press-title:1.12rem;
  --fs-press-arrow:.78em;
  --fs-press-desc:.92rem;
  --fs-press-tag:.7rem;

  /* cookie banner */
  --fs-cookie-kicker:.62rem;
  --fs-cookie-title:1.12rem;
  --fs-cookie-text:.86rem;
  --fs-cookie-btn:.85rem;
  --fs-cookie-btn-link:.78rem;
  --fs-cookie-pref-strong:.82rem;
  --fs-cookie-pref-small:.72rem;
  --fs-cookie-foot:.68rem;
  --fs-cookie-policy-link:.75rem;
}

/* ==========================================================================
   4. BOTTONI
   Una sola definizione: .btn base, .btn-ghost, .btn-small, .btn-wa.
   ========================================================================== */
:root{
  --btn-font:Jost,sans-serif;
  --btn-bg:linear-gradient(92deg,var(--color-accent),var(--color-accent-2));
  --btn-color:#FFFFFF;
  --btn-border:1px solid var(--color-accent-2);
  --btn-radius:var(--radius-btn);
  --btn-pad:.9rem 1.7rem;
  --btn-fs:1rem;
  --btn-weight:600;
  --btn-transition:.25s;
  --btn-hover-bg:var(--color-accent-soft);
  --btn-hover-border:var(--color-accent-soft);
  --btn-hover-color:var(--color-on-accent);
  --btn-hover-lift:-2px;

  /* variante piccola */
  --btn-fs-sm:.92rem;
  --btn-pad-sm:.55rem 1.2rem;

  /* variante fantasma (solo contorno) */
  --btn-ghost-bg:transparent;
  --btn-ghost-color:var(--color-accent);
  --btn-ghost-border:var(--color-accent-2);

  /* variante WhatsApp */
  --btn-wa-bg:linear-gradient(92deg,var(--color-whatsapp-dark),var(--color-whatsapp));
  --btn-wa-color:var(--color-whatsapp-ink);
  --btn-wa-border:var(--color-whatsapp);
}

/* ==========================================================================
   5. MOBILE E TABLET
   Stessi nomi, valori diversi. I breakpoint sono quelli che il sito usava
   gia', cosi' non cambia niente ai bordi delle media query.
   ========================================================================== */

/* --- fino a 1240px: navigazione --- */
@media(max-width:1240px){
  :root{ --fs-nav:1rem; }
}

/* --- fino a 1180px: titolo della landing test --- */
@media(max-width:1180px){
  :root{ --fs-h1-lp:clamp(1.9rem,4.6vw,2.9rem); }
}

/* --- fino a 900px: titoli hero --- */
@media(max-width:900px){
  :root{
    --fs-h1-hero:clamp(1.9rem,7.4vw,2.6rem);
    --fs-h1-full:clamp(2rem,7.6vw,2.9rem);
  }
}

/* --- fino a 899px: card delle soluzioni --- */
@media(max-width:899px){
  :root{
    --fs-card-title:clamp(1.02rem,4.6vw,1.24rem);
    --fs-card-list-lg:clamp(.76rem,3.3vw,.88rem);
    /* questi due nascono qui: su desktop valgono i token della card intera */
    --fs-card-label-sm:.64rem;
    --fs-card-link-sm:.84rem;
  }
}

/* --- fino a 560px: telefono --- */
@media(max-width:560px){
  :root{
    --fs-h1-lp:clamp(2rem,9vw,2.6rem);
    --fs-trust:.78rem;
    --fs-proof-total:.96rem;
    --fs-proof-total-strong:1.2rem;
    --fs-proof-key:.62rem;
    --fs-proof-value:.95rem;
    --fs-answer:.94rem;
    --fs-score:1.8rem;
    --btn-fs-sm:.85rem;
    /* nati qui: usati solo da regole interne a questo breakpoint */
    --fs-lead-lp:1.02rem;
    --btn-fs-lp-sm:.85rem;
  }
}