/* Sicilia Chill — TOKEN DI DESIGN · SORGENTE UNICA
   ---------------------------------------------------------------
   Questo file è l'UNICO punto in cui vivono i colori e la tipografia
   del brand. Ogni pagina del sito lo carica con:
     <link rel="stylesheet" href="https://siciliachill.it/lib/tokens.css">
   e usa le variabili con var(--gold), var(--ink), ecc.

   PER IL REBRAND: quando arriva la nuova palette del grafico, si
   modificano SOLO i valori qui sotto e tutto il sito si aggiorna.
   Non serve toccare le singole pagine.
   Le stesse tinte (in esadecimale) sono replicate, per forza di cose
   in modo statico, in: stampa/PDF dei tour, template email/newsletter
   e documenti business — l'elenco completo è nel Brand Kit.
   --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{
  /* — Palette brand (Figma · DEFINITIVA) — */
  --terracotta:#e06f32; /* accento primario */
  --etna:#2b2b2b;       /* scuro · testo */
  --limestone:#f9faf7;  /* sfondo chiaro */
  --grey:#b0b0b0;       /* attenuato · bordi */

  /* — Ruoli (nomi storici → nuova palette, così tutto il sito si aggiorna) — */
  --gold:var(--terracotta);   /* accento primario (ex oro) */
  --coral:#c85a28;            /* terracotta scuro · hover/secondario */
  --teal:var(--etna);         /* ex verde-acqua: ritirato nel neutro scuro del brand */
  --ink:var(--etna);          /* testo principale */
  --paper:var(--limestone);   /* sfondo pagina */
  --paper2:#f1f3ee;           /* sfondo secondario · tinta limestone */
  --card:#ffffff;             /* superfici (schede, box) */
  --line:#e5e6e0;             /* bordi e separatori · neutro chiaro */
  --muted:#8f8f8f;            /* testo attenuato · grey leggibile */
  --good:#2e7d4f;             /* stato positivo · verde */
  --red:#b23b3b;              /* stato negativo · rosso */

  /* — Alias storici (per compatibilità: nella famiglia terracotta) — */
  --free:var(--good);
  --green:var(--good);
  --by:#c47a1e;
  --amber:#c47a1e;
  --mut:var(--muted);
  --carta:var(--paper2);
  --bronze:#b06a3f;
  --bronze2:#d09a63;

  /* — Tipografia (Figma · DEFINITIVA) — */
  --font-serif:'Instrument Serif',Georgia,serif;   /* titoli display (spesso maiuscolo) */
  --font-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* testo, interfaccia */
  --font-display:var(--font-serif);

  /* — Forma — */
  --radius:16px;
  --radius-sm:10px;
  --radius-pill:40px;

  /* — Ombre — */
  --shadow:0 6px 24px rgba(36,26,16,.08);
  --shadow-sm:0 2px 8px rgba(36,26,16,.06);
}

/* ===== Base globale · craft + accessibilità (Onda 1 · standard top 0,1%) =====
   Regole additive: rifiniscono senza sovrascrivere gli stili specifici delle pagine.
   Servite a tutto il sito perché tokens.css è caricato ovunque. */

/* Rifinitura tipografica: niente parole "orfane" nei titoli, rag del corpo più bello */
h1,h2,h3,h4{ text-wrap:balance; }

/* Regola #20.2 — AGGIORNATA (ordine della titolare Katia, 16/07/2026):
   • Instrument Serif SOLO per h1 e h2 (titoli display): MAIUSCOLO, peso Regular (400),
     crenatura −2% (letter-spacing −0.02em).
   • TUTTO IL RESTO in Instrument Sans, un unico peso: Regular (400). h3–h6 → sans, caso
     normale (non maiuscolo). I micro-label che vogliono il maiuscolo (eyebrow, .exp-h,
     intestazioni-colonna del footer…) lo impostano da soli con le proprie classi.
   • Instrument Sans usa SOLO tre pesi (Regola #20.2): Regular 400 (default), Medium 500
     (numeri/micro-etichette), SemiBold 600 (enfasi/parole-chiave). Niente 700/800 né grassetto
     sintetico. Instrument Serif resta Regular 400. */
h1,h2{ font-family:var(--font-serif); text-transform:uppercase; font-weight:400; letter-spacing:-0.02em; }
h3,h4,h5,h6{ font-family:var(--font-sans); font-weight:400; letter-spacing:normal; text-transform:none; }
/* Un solo peso per Instrument Sans in tutto il sito: si annulla ogni grassetto (incluso <b>/<strong>)
   e si disattiva il grassetto/corsivo sintetico del browser, così resta solo il Regular reale. */
b,strong,th{ font-weight:400; }
body{ font-synthesis:none; -webkit-font-synthesis:none; }
p,li,blockquote{ text-wrap:pretty; }

/* Focus visibile coerente (WCAG 2.2 · 2.4.7/2.4.13) */
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }

/* Rispetto delle preferenze di movimento ridotto (WCAG 2.3.3) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* Skip-link "salta al contenuto": invisibile finché non riceve il focus da tastiera */
.sc-skip{ position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--gold); color:#fff; font-family:var(--font-sans); font-weight:400; font-size:14px;
  padding:12px 18px; border-radius:0 0 10px 0; text-decoration:none; }
.sc-skip:focus{ left:0; }

/* Rebrand (Regola #20.1): TUTTI i pulsanti hanno lo stesso carattere (Instrument Sans) e corpo in tutto il sito.
   Copre ogni classe pulsante usata dai builder e dalla barra: .btn, .cta, .ncta, .btn2, button. */
/* 18/8/2026 — aggiunte `.bottone` e `.pillola` del sistema nuovo. Motivo, perché non si
   ripeta: una classe pulsante con un nome NUOVO sfugge a questo elenco, e quindi sfugge
   alla regola. È successo: `.bottone` era nato con peso 500 e sarebbe entrato nel sito
   come l'unico pulsante più pesante di tutti gli altri. Chi aggiunge un comando aggiunge
   il suo nome QUI, oppure riusa un nome che c'è già. */
.btn,.btn2,.cta,.ncta,.bottone,.pillola,button.btn,a.btn,a.cta,a.ncta{
  font-family:var(--font-sans)!important; font-size:15px!important; font-weight:400!important;
}
@media (prefers-reduced-motion:reduce){ .sc-skip{ transition:none; } }