/* ═══════════════════════════════════════════════════════════════════════════
   PALETTE — unica sorgente di verità dei colori di Fitagora.

   Nessun colore va scritto altrove: ogni pagina (index, workout, admin,
   landing, onboarding) e ogni script consumano SOLO i token qui sotto. Per
   provare una palette diversa si riscrive questo blocco e cambia tutta l'app,
   senza toccare una riga di markup o di logica.

   Il JS non ridefinisce nulla: static/palette.js legge questi stessi custom
   properties a runtime (getComputedStyle) e li espone come triplette RGB per
   chi deve interpolare (fatigueHeatColor, desireDragColor) o disegnare su
   canvas/SVG. Un solo posto, due consumatori.

   Due scale coesistono per ragioni di prodotto, ed è deliberato:
     · BRAND    — identità, navigazione, CTA (teal/viola)
     · HEAT     — fatica e carico muscolare (giallo→rosso), la semantica
                  "quanto è affaticato" non deve mai leggersi come brand
   Gli indici numerici crescono con l'intensità: --surface-1 è il fondo più
   scuro, --heat-1 il carico più basso.

   UNICA eccezione ammessa fuori da qui: le ombre `rgba(0,0,0,α)`. Sono nero
   puro a opacità variabile — profondità, non tinta: non cambiano al cambiare
   della palette e tokenizzare ogni alpha darebbe una dozzina di token senza
   alcun beneficio. Il colore d'ombra di default resta --shadow, qui sotto.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── CANALI ────────────────────────────────────────────────────────────
     Le tinte che servono anche translucide sono definite come componenti
     "r g b", e il token solido si deriva da qui. Così UN solo valore governa
     sia il pieno sia ogni sua velatura: `rgb(var(--brand-primary-rgb) / .35)`.
     Cambiando questa riga cambiano insieme il bottone pieno, il suo alone e
     il suo fondo tenue — che è il punto di poter provare palette in un
     secondo senza inseguire venti rgba() sparsi. */
  --brand-primary-rgb: 20 184 166;
  --brand-secondary-rgb: 167 139 250;
  --status-positive-rgb: 0 230 118;
  --status-warning-rgb: 255 176 32;
  --status-negative-rgb: 255 82 82;
  --text-1-rgb: 255 255 255;
  --surface-1-rgb: 13 13 13;
  --surface-2-rgb: 26 26 26;

  /* ── BRAND ─────────────────────────────────────────────────────────────
     primary  = azione, selezione, accento (CTA, tab attiva, anello readiness)
     ink      = testo/icone SOPRA un fondo primary (contrasto garantito)
     secondary= accento di supporto, estremo alto del vettore desiderio */
  --brand-primary: rgb(var(--brand-primary-rgb));
  --brand-primary-ink: #04201c;
  --brand-secondary: rgb(var(--brand-secondary-rgb));

  /* ── SUPERFICI (1 = più in fondo, 3 = più in rilievo) ────────────────── */
  --surface-1: rgb(var(--surface-1-rgb));               /* sfondo pagina */
  --surface-2: rgb(var(--surface-2-rgb));               /* card, header, bottom-nav */
  --surface-3: #252525;               /* in rilievo sopra la card: tooltip */

  /* ── TESTO (1 = massimo contrasto) ───────────────────────────────────── */
  --text-1: rgb(var(--text-1-rgb));
  --text-2: #666677;
  --text-on-heat: #0a0a0c;            /* sopra i toni caldi, che sono chiari */

  /* ── TRATTI E VELI NEUTRI ────────────────────────────────────────────
     Veli di bianco a opacità crescente: bordi, divisori, riempimenti
     inattivi. Espressi su --text-1 così seguono il tema se diventa chiaro. */
  --border-1: rgb(var(--text-1-rgb) / .07);   /* bordo card, divisori */
  --border-2: rgb(var(--text-1-rgb) / .14);   /* bordo input/campi */
  --veil-1: rgb(var(--text-1-rgb) / .06);     /* fondo input, traccia barre */
  --veil-2: rgb(var(--text-1-rgb) / .09);     /* traccia barre più marcata */
  --veil-3: rgb(var(--text-1-rgb) / .16);     /* outline silhouette twin */

  /* ── SCRIM (fondo dietro dialog/sheet) ──────────────────────────────── */
  --scrim-1: rgba(0, 0, 0, .55);

  /* ── STATO SEMANTICO ────────────────────────────────────────────────── */
  --status-positive: rgb(var(--status-positive-rgb));         /* affidabilità alta, esito ok */
  --status-warning: rgb(var(--status-warning-rgb));          /* affidabilità media */
  --status-negative: rgb(var(--status-negative-rgb));         /* affidabilità bassa, errore */

  /* ── HEAT: carico/fatica, basso → alto ───────────────────────────────
     Usata sia a gradini (load-bar delle card, heatmap) sia interpolata in
     continuo (fatigueHeatColor). L'ordine dei token È la scala: palette.js
     li raccoglie in sequenza finché ne trova. */
  --heat-1: #facc15;
  --heat-2: #f97316;
  --heat-3: #b91c1c;
  /* Componenti "r g b" degli stessi tre hex sopra (NON derivati via var(), a
     differenza di --brand-primary: un test e2e esistente legge --heat-N come
     hex letterale e lo riparsa a mano — pianifica-corpo-vivo-polish-2.spec.js).
     Servono alla schermata completata (barre a due toni, Task 6) per velare
     il tono "prima" con rgb(var(--heat-N-rgb) / .35), stessa tinta del
     "dopo" a densità diversa — mai un colore fuori scala. */
  --heat-1-rgb: 250 204 21;
  --heat-2-rgb: 249 115 22;
  --heat-3-rgb: 185 28 28;
  /* La scala come gradiente pronto: le load-bar delle card lo usano
     direttamente in CSS, senza passare dal JS. */
  --heat-gradient: linear-gradient(90deg, var(--heat-1), var(--heat-2), var(--heat-3));

  /* ── VETTORE DESIDERIO (drag sul muscolo) ────────────────────────────
     Negativo "allenalo meno" = verde recupero; zero = neutro; positivo
     scala verso --brand-primary e poi --brand-secondary. Deliberatamente
     distinta dalla scala HEAT (vedi twin-color.js). */
  --desire-negative-rgb: 22 163 74;
  --desire-neutral-rgb: 138 148 171;
  --desire-negative: rgb(var(--desire-negative-rgb));
  --desire-neutral: rgb(var(--desire-neutral-rgb));

  /* ── SILHOUETTE TWIN (parti del corpo a riposo) ──────────────────────
     Usate da index.html (mappa grande), workout.html (mappa del video) e
     onboarding.html (anteprima maschile/femminile): stesse tre parti, un
     solo posto. */
  --twin-body: #454e62;
  --twin-head: #5c6679;
  --twin-hair: #2f3543;

  /* ── TESTO, LIVELLI AGGIUNTIVI ───────────────────────────────────────
     --text-meta è il grigio secondario della pagina workout, più chiaro di
     --text-2 (che regge etichette piccole maiuscole). Restano due valori
     perché unificarli è una scelta di design da prendere guardando le
     schermate, non un rename: qui sono comunque centralizzati. */
  --text-meta: #9aa0ad;
  --text-body: #cfd3db;               /* elenco programma, testo scorrevole */
  --text-faint: #555555;              /* placeholder disattivato */

  /* ── CATEGORIE WORKOUT (identità per tipo di allenamento) ───────────── */
  --cat-strength: #f5a524;
  --cat-cardio: #fb7185;
  --cat-bodyweight: #38bdf8;
  --cat-pilates: #34d399;
  --cat-yoga: #a78bfa;
  --cat-mobility: #2dd4bf;
  --cat-dance: #f472b6;
  --cat-mixed: #94a3b8;

  /* ── SORGENTI ESTERNE ───────────────────────────────────────────────
     Tinta di brand di terzi, non nostra: sta qui per non restare sparsa nel
     markup, ma non va riusata come colore d'accento dell'app. */

  /* ── FORMA ─────────────────────────────────────────────────────────── */
  --radius: 14px;
  --shadow: 0 2px 16px rgba(0, 0, 0, .6);
  --content-max-width: 480px;
}