/* pal. · tokens.css · copia fedele di design-tokens.css (radice del repository), che resta la fonte unica.
   Non modificare qui: aggiorna design-tokens.css e ricopia. */
/* pal. · design tokens · ottobre 2026
   Fonte: tavola "Design system" nella tela Claude Design.
   Font: Hanken Grotesk, ospitato sul dominio. */

:root {
  /* Tipografia */
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fs-number-xl: 88px;   /* numeri protagonisti, peso 300, cifre tabulari */
  --fs-title: 44px;
  --fs-title-app: 30px;
  --fs-subtitle: 24px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-label: 11px;       /* maiuscolo, letter-spacing .05em */
  /* Aggiunti da D2-I03, valori dei sorgenti Design-System, Console-*, App-* */
  --fs-caption: 12px;     /* filtri, pulsanti console, note */
  --fs-data: 14px;        /* righe e tabelle console */
  --fs-body-s: 15px;      /* righe dati, voci di menu */
  --fs-kpi: 40px;         /* numero della scheda KPI, peso 300 */
  --fs-number-m: 56px;    /* numero grande intermedio, peso 300 */
  --fs-input-num: 22px;   /* valore nei campi di misura dell'app */
  --ls-tight: -0.02em; --ls-number: -0.04em; --ls-label: 0.05em;
  --ls-kpi: -0.03em; --ls-tag: 0.04em; --ls-nav: 0.03em; --ls-logo: -0.035em;

  /* Spaziatura */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Passi intermedi di spaziatura, fuori dalla scala 4/8, presenti nei sorgenti (D2-I03) */
  --sp-6: 6px; --sp-10: 10px; --sp-11: 11px; --sp-13: 13px; --sp-14: 14px;
  --sp-15: 15px; --sp-18: 18px; --sp-20: 20px; --sp-28: 28px; --sp-30: 30px; --sp-36: 36px;

  /* Raggi */
  --r-field: 10px; --r-card: 18px; --r-pill: 999px;
  --r-bar: 2px; --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-photo: 14px; --r-tile: 22px; --r-sheet: 24px;

  /* Misure ricorrenti dei componenti */
  --hit: 44px;            /* area tattile minima */
  --h-progress: 4px;      /* barra sottile (tabelle, allenamento) */
  --w-sidebar: 240px;     /* barra laterale della console */

  /* Movimento */
  --t-fast: 120ms; --t-base: 240ms; --t-slow: 480ms; --t-story: 760ms; --t-logo: 1000ms;
  --ease-in: cubic-bezier(.2,.7,0,1);
  --ease-out: cubic-bezier(.6,0,.8,.3);
  --ease-std: cubic-bezier(.4,0,.2,1);
  --ease-logo: cubic-bezier(.6,0,.2,1);   /* Motion-Pal: da palmieri. a pal. */
  --stagger: 45ms;
}

/* Tema scuro (app, sito) */
:root, [data-theme="dark"] {
  --bg: #0A0A0A;
  --surface: #151615;
  --line: #262827;
  --text: #F2F1EC;
  --text-2: #8C918F;
  --text-3: #7E827F;
  --line-strong: #3A3D3C; /* filetto forte: maniglia del pannello, pulsanti piccoli */
  --scrim: rgba(10,10,10,.6);
  --tile-bg: #1A1B1A;     /* fondo dell'icona app pal. */
  --tile-fg: #F2F1EC;
  --data-ok: #9DBF8E;     /* progresso, in soglia, record, fatto */
  --data-warn: #D9A441;   /* attenzione, in scadenza */
  --data-bad: #D9694A;    /* fuori soglia, saltato, da leggere */
  --data-info: #8FAFC7;   /* in corso, informazione */
  /* Testo colorato dei dati (D2-A09): stessa tinta del segno, da usare quando il colore e' su una parola. */
  --data-ok-text: #9DBF8E; --data-warn-text: #D9A441; --data-bad-text: #D9694A; --data-info-text: #8FAFC7;
  /* Zone cardiache */
  --z1: #7E827F; --z2: #8FAFC7; --z3: #9DBF8E; --z4: #D9A441; --z5: #D9694A;
}

/* Tema chiaro (console pal. coach, email, opzionale nell'app) */
[data-theme="light"] {
  --bg: #F2F1EC;
  --surface: #FAF9F6;
  --line: #D6D4CD;
  --text: #111111;
  --text-2: #6B6E6A;
  --text-3: #6B6E68;
  --line-strong: #6B6E68; /* nessun valore nei sorgenti chiari: stesso valore di --text-3 */
  --scrim: rgba(10,10,10,.6);
  --tile-bg: #F2F1EC;
  --tile-fg: #111111;
  --data-ok: #4F7A47;
  --data-warn: #A8761A;
  --data-bad: #B44A2D;
  --data-info: #4C7392;
  --data-ok-text: #4D7645; --data-warn-text: #8F6416; --data-bad-text: #B44A2D; --data-info-text: #4A708E; /* AA 4,5 su --bg e --surface */
  --z1: #6B6E68; --z2: #4C7392; --z3: #4F7A47; --z4: #A8761A; --z5: #B44A2D;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}