/* ==========================================================================
   Lab Medicinae — tokens.css
   --------------------------------------------------------------------------
   Fonte di verità: Figma file `lab.medicinae.it` (key E9qbmhVQvU6vZJyPnU0mXD),
   collezioni Variables `Primitives` · `Semantic` · `Typography` + Text Styles.
   Estratto via MCP (Plugin API) il 2026-07-16. Non modificare a mano i valori:
   se il design cambia, ri-estrarre dalle Variables e rigenerare questo file.

   Regole (handoff §3–§4):
   - Naming speculare alle Variables: `text/muted` → `--text-muted`.
   - Cascata espressa nel CSS: i semantici puntano ai primitivi via var().
   - I "grigi" del testo sono Black a opacità (color-mix), mai esadecimali nuovi.
   - Radius 0 ovunque, corallo mai testo su chiaro (→ --accent-text), Sage solo segno.
   ========================================================================== */

:root {

  /* --- Primitives (8) — palette brand, valori fissi ---------------------- */
  --black:       #1e1e1e;
  --brown:       #8a797a;
  --sage:        #8bbaab;
  --coral:       #ff6b3d;
  --coral-dark:  #d2500f;
  --light-gray:  #e2e2e2;
  --off-white:   #f5f5f5;
  --white:       #ffffff;

  /* --- Semantic (11) — SOLO questi nei componenti ------------------------ */
  /* alias 1:1 sui primitivi (la cascata vive qui, in var() annidati) */
  --surface:        var(--off-white);
  --surface-white:  var(--white);
  --text:           var(--black);
  --accent:         var(--coral);
  --accent-text:    var(--coral-dark);
  --support:        var(--sage);
  --support-muted:  var(--brown);   /* stato inattivo/pending del segno (handoff 09) */
  --border:         var(--brown);   /* scope: solo bordi. Mai fill, mai testo. (handoff 09) */
  /* testo a opacità: Black @78/54/36% — NON grigi nuovi */
  --text-secondary: color-mix(in srgb, var(--black) 78%, transparent);
  --text-muted:     color-mix(in srgb, var(--black) 54%, transparent);
  --text-disabled:  color-mix(in srgb, var(--black) 36%, transparent);

  /* --- Typography · atomici (speculari alle Variables) ------------------- */
  /* famiglie (fallback aggiunti in fase build, la Variable è solo il nome) */
  --font-content: "Inter", system-ui, -apple-system, sans-serif;
  --font-ui:      "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* size */
  --size-14:  14px;
  --size-20:  20px;
  --size-28:  28px;
  --size-36:  36px;
  --size-48:  48px;
  --size-64:  64px;
  --size-128: 128px;

  /* leading (line-height in px, come nei Text Styles Figma) */
  --leading-14:  14px;
  --leading-24:  24px;
  --leading-33:  33px;
  --leading-40:  40px;
  --leading-48:  48px;
  --leading-64:  64px;
  --leading-128: 128px;

  /* weight (nome stile Figma → valore numerico CSS) */
  --weight-regular:  400; /* Regular   */
  --weight-medium:   500; /* Medium    */
  --weight-semibold: 600; /* Semi Bold */
  --weight-bold:     700; /* Bold      */

  /* --- Spacing (scala §3) ------------------------------------------------ */
  /* NB: NON proviene dalle Variables Figma — scala documentata, usata in build. */
  --space-4:   4px;
  --space-8:   8px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-104: 104px;

  /* --- Motion ------------------------------------------------------------ */
  /* Speculare alla collection Variables `Motion` (sync sessioni 12–13).
     DUE curve, non una (documentato nella sezione Motion del DS):
     - ease/out rinforzata (base skill emil-design-eng, 2026-07-16) per tutto
       ciò che si MUOVE: le built-in CSS sono troppo deboli per sembrare
       intenzionali;
     - ease/base = la built-in `ease` del browser, scritta per esteso, per
       ciò che cambia SENZA muoversi (colore, opacità), dove una curva
       direzionale non aggiunge niente. Prima era la parola chiave `ease`
       sparsa nei componenti: valeva come scelta ma non era dichiarata.
     I token `quest/*` del flusso questionario restano scoped su
     `.quest-form--flow` in components.css (decisione D3), e in Figma
     vivono nella stessa collection Motion. */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-base:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 160ms;  /* feedback di pressione, focus campi, fade drawer */
  --duration-base: 200ms;  /* hover colore, micro-lift card, progress bar */
  --duration-slow: 350ms;  /* entrata delle sezioni (reveal on scroll) */

  /* --- Segni · hairline ---------------------------------------------------- */
  /* Scala line/1..3 della styleguide (canonico DS 253:952): --text a opacità,
     stessa grammatica dei testi (color-mix, mai grigi nuovi). Speculare alle
     Variables `line/1..3` nella collection Semantic (sync sessione 12). */
  --line-1: color-mix(in srgb, var(--text) 16%, transparent);
  --line-2: color-mix(in srgb, var(--text) 22%, transparent);
  --line-3: color-mix(in srgb, var(--text) 40%, transparent);
}

/* ==========================================================================
   Text Styles compositi (10) — utility che catturano l'abbinamento esatto
   family + style + leading + tracking dei Text Styles Figma.
   Uso: <h1 class="ts-display-64">…</h1>
   ========================================================================== */

.ts-display-64 {
  font-family: var(--font-content);
  font-weight: var(--weight-semibold);
  font-size: var(--size-64);
  line-height: var(--leading-64);
}

.ts-display-48 { /* display mobile */
  font-family: var(--font-content);
  font-weight: var(--weight-semibold);
  font-size: var(--size-48);
  line-height: var(--leading-48);
}

.ts-title-36 {
  font-family: var(--font-content);
  font-weight: var(--weight-semibold);
  font-size: var(--size-36);
  line-height: var(--leading-40);
}

.ts-title-36-regular { /* voci inattive menu mobile (handoff 09 §1) */
  font-family: var(--font-content);
  font-weight: var(--weight-regular);
  font-size: var(--size-36);
  line-height: var(--leading-40);
}

.ts-step-28 {
  font-family: var(--font-content);
  font-weight: var(--weight-regular);
  font-size: var(--size-28);
  line-height: var(--leading-33);
}

.ts-body-20 {
  font-family: var(--font-content);
  font-weight: var(--weight-regular);
  font-size: var(--size-20);
  line-height: var(--leading-24);
}

.ts-meta-20 {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--size-20);
  line-height: var(--leading-24);
}

.ts-label-14 {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--size-14);
  line-height: var(--leading-14);
}

.ts-ui-14 {
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  font-size: var(--size-14);
  line-height: var(--leading-14);
}

.ts-ui-14-medium {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--size-14);
  line-height: var(--leading-14);
}

.ts-num-128 {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--size-128);
  line-height: var(--leading-128);
  letter-spacing: -0.05em; /* −5% (solo nel Text Style, non negli atomici) */
}

/* ==========================================================================
   Dark mode — SCAFFOLD (handoff §3: architettura pronta, palette post-lancio).
   Non implementare ora. Un secondo mode si esprime ridefinendo i SEMANTICI qui
   (i primitivi restano brand fissi). Lasciato vuoto di proposito.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* --surface: …; --text: …; …  (palette dark — post-lancio) */
  }
}