/* ============================================================================
   LYFERA — TOKEN, IMPLEMENTAZIONE UNICA
   ----------------------------------------------------------------------------
   Attività D0.2 · 2026-08-05. Portato da
   brand/design/04-08-26/UI mockups per sistema proposte/_ds/…/tokens/

   ⚠️ Il file d'origine porta in testa «scheletro da completare in Claude Design».
      È un residuo: il colore È deciso, venti righe più sotto nel file stesso
      (tema scuro unico, 2026-08-04). E Claude Design è fuori dalla pipeline
      dal 2026-08-05 — DEC-049. La riga non è stata portata.

   QUESTO FILE È L'UNICO POSTO IN CUI ESISTE UN VALORE.
   Vetrina e account lo condividono. Chi ne aggiunge una copia rompe D0.2.

   COME SI SCEGLIE FRA I DUE VOCABOLARI
   · Nomi lunghi  (--color-neutral-900) = design system. USARE QUESTI.
   · Nomi brevi   (--n900)              = ponte per le 2.200 righe già scritte.
     Sono alias, non valori: §6. Codice nuovo non li usa.

   DOVE I DUE DIVERGEVANO, E CHI HA VINTO
   | Cosa                | Design system      | Prototipi     | Vince      |
   | nomi dei token      | --color-neutral-*  | --n*          | il DS      |
   | veli semantici      | 8%                 | 10%           | i prototipi|
   | --text-display      | clamp(3rem,6vw,…)  | clamp(2.6rem,7vw,…) | i prototipi |
   Sui VALORI vincono i prototipi: sono stati visti e approvati su pagine vere,
   e «le superfici già disegnate si estendono, mai si ridisegnano» (piano §7).
   Sui NOMI vince il design system: è la fonte, e si porta senza discutere.
   ========================================================================= */

/* ==========================================================================
   1. TAVOLOZZA — CHIARO
   Il tema è sempre esplicito sull'elemento <html>: la vetrina nasce chiara,
   l'account nasce scuro. Nessuna pagina resta senza colore se il JS non parte.
   ====================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* superfici — off-white caldo, mai bianco puro */
  --color-surface:          #F4F2EE;
  --color-surface-subtle:   #EDEAE4;
  --color-surface-muted:    #E5E1D9;
  --color-surface-backdrop: rgba(244, 242, 238, 0.82);

  /* scala neutra — numerata per CONTRASTO CRESCENTE sulla superficie,
     non per luminosità: 50 è il passo più vicino al fondo, 900 è il testo */
  --color-neutral-50:  #EAE7E1;
  --color-neutral-100: #E1DDD6;
  --color-neutral-200: #D2CDC3;   /* bordo predefinito */
  --color-neutral-300: #BCB6AA;   /* bordo in hover, tratteggi */
  --color-neutral-400: #8B8478;   /* testo di elementi a riposo */
  --color-neutral-500: #6E675C;
  --color-neutral-600: #574F45;   /* testo secondario */
  --color-neutral-700: #3E382F;
  --color-neutral-800: #2A251F;
  --color-neutral-900: #1A1815;   /* testo primario, riempimento attivo */

  /* oro del marchio — su fondo chiaro servono due valori: uno leggibile
     per il testo, uno saturo per i tratti. Il tratto è identico nei due temi */
  --color-brand:       #8E7130;
  --color-brand-hover: #755C24;
  --color-brand-rule:  #C5AE79;
  --color-brand-fill:  #C5AE79;
  --color-brand-on:    #1A1815;
  --color-brand-light: rgba(197, 174, 121, 0.14);

  /* funzionale — dice COSA STA SUCCEDENDO, mai chi siamo */
  --color-accent:       #43608C;
  --color-accent-light: rgba(67, 96, 140, 0.10);

  --color-success:    #3E7350;
  --color-warning:    #8E5D1E;
  --color-error:      #A2453C;
  --color-success-bg: rgba(62, 115, 80, 0.10);
  --color-warning-bg: rgba(142, 93, 30, 0.10);
  --color-error-bg:   rgba(162, 69, 60, 0.10);
}

/* ==========================================================================
   2. TAVOLOZZA — SCURO
   Neutri caldi a bassissima saturazione: stanno accanto all'oro senza
   competere con le fotografie. Mai nero puro.
   ====================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-surface:          #131211;
  --color-surface-subtle:   #181715;
  --color-surface-muted:    #201E1B;
  --color-surface-backdrop: rgba(19, 18, 17, 0.82);

  --color-neutral-50:  #1B1A18;
  --color-neutral-100: #232120;
  --color-neutral-200: #2D2B28;
  --color-neutral-300: #3B3834;
  --color-neutral-400: #716B64;
  --color-neutral-500: #8A837B;
  --color-neutral-600: #A69F96;
  --color-neutral-700: #C2BCB3;
  --color-neutral-800: #DBD6CE;
  --color-neutral-900: #EFEBE4;

  --color-brand:       #C5AE79;
  --color-brand-hover: #D6C08B;
  --color-brand-rule:  #C5AE79;
  --color-brand-fill:  #C5AE79;
  --color-brand-on:    #131211;
  --color-brand-light: rgba(197, 174, 121, 0.10);

  --color-accent:       #8FA9C9;
  --color-accent-light: rgba(143, 169, 201, 0.10);

  --color-success:    #85B08A;
  --color-warning:    #C98F4E;
  --color-error:      #D4756A;
  --color-success-bg: rgba(133, 176, 138, 0.10);
  --color-warning-bg: rgba(201, 143, 78, 0.10);
  --color-error-bg:   rgba(212, 117, 106, 0.10);
}

/* ==========================================================================
   2-bis. L'ANELLO DI FUOCO — l'unico colore che porta un CONTRATTO NUMERICO
   ----------------------------------------------------------------------------
   L'anello resta ORO su tutte e tre le superfici: quella decisione non cambia
   (base.css §anello). Cambia QUALE oro, e per la stessa ragione già scritta in
   §5-bis: a tema chiaro l'oro ha due valori, e l'anello prendeva quello sbagliato.

     ~~--color-brand-rule~~ → --color-brand
     Il tratto saturo #C5AE79 su #F4F2EE fa 1,94:1. WCAG 2.2 SC 1.4.11 chiede
     3:1 ai componenti non testuali, e un anello di fuoco è il più non testuale
     e il più necessario di tutti. In tema scuro lo stesso anello faceva 8,65:1
     — cioè il difetto viveva SOLO nella vetrina, che è l'unica superficie che
     nasce chiara, ed era invisibile a chi lavora nell'account.

   MISURATO sui tre fondi su cui l'anello può comparire (l'`outline-offset`
   lo appoggia sempre allo sfondo del genitore, mai sulla lastra — nessun
   elemento a fuoco vive dentro una `.plate`):
     chiaro  #8E7130 → surface 4,12 · subtle 3,84 · muted 3,54
     scuro   #C5AE79 → surface 8,65 · subtle 8,28 · muted 7,68
   Il minimo è 3,54, sopra la soglia di 3.

   HA UN NOME SUO e non è un alias di comodo: chi domani ritocca l'oro deve
   vedere che da questa parte c'è una soglia da rimisurare, non un colore.
   [V-21 · 2026-08-06]
   ====================================================================== */

:root {
  --color-focus-ring: var(--color-brand);
}

/* ==========================================================================
   3. INVARIANTI — non cambiano col tema
   ====================================================================== */

:root {

  /* --- tipografia: EREDITATA, non si tocca -----------------------------
     Due registri in contrasto: è il segnale di parentela più forte.
     Pesi: SOLO questi tre. Il 700 è vietato — la gerarchia si costruisce
     con dimensione, spaziatura e colore. */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'SF Mono', ui-monospace, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* scala modulare, rapporto 1.25 (terza maggiore), base 16px, portata al 90% su richiesta
     dell'utente il 18/09/2026. Ogni valore e' il 90% del precedente arrotondato al pixel
     intero, e resta dichiarato in rem: il numero reso e' pieno e il testo continua a seguire
     l'impostazione del font del browser, che un px secco toglierebbe. */
  /* DESIGN-P1-90: readable labels and notes, approved 22 September. */
  --text-xs: 0.8rem; /* 12.8px labels and notes */
  --text-input: 1rem; /* Mobile editable fields avoid browser focus zoom. */
  --text-xxs: 0.625rem; /* 10px photographic overlays only */
  --text-sm: 0.75rem;      /* 12px    — testo secondario (era 12.8px) */
  --text-base: 0.875rem;   /* 14px    — corpo (era 16px) */
  --text-md: 1.125rem;     /* 18px    (era 20px) */
  --text-lg: 1.4375rem;    /* 23px    (era 25px) */
  --text-xl: 1.75rem;      /* 28px    (era 31.25px) */
  --text-2xl: 2.1875rem;   /* 35px    (era 39px) */
  --text-3xl: 2.75rem;     /* 44px    (era 48.8px) */
  --text-4xl: 3.4375rem;   /* 55px    (era 61px) */
  --text-display: clamp(2.3125rem, 6.3vw, 4.9375rem); /* 37px..79px (era 41.6..88px) */

  --tracking-tight: -0.04em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.26em;   /* oltre il DS: le etichette mono incise */

  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  /* --- spazio: base 8 -------------------------------------------------- */
  --space-1: 4px;    --space-2: 8px;    --space-3: 12px;   --space-4: 16px;
  --space-5: 20px;   --space-6: 24px;   --space-8: 32px;   --space-10: 40px;
  --space-12: 48px;  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;
  --space-32: 128px; --space-40: 160px;

  --max-width: 1440px;
  --max-width-content: 960px;
  --max-width-read: 68ch;                        /* oltre il DS */
  --gutter: clamp(20px, 4vw, 48px);              /* oltre il DS */

  --grid-columns: 12;
  --grid-gap: 1.5rem;

  /* --- forma ------------------------------------------------------------
     La regola che governa tutto: I CONTENITORI SONO SQUADRATI —
     e un campo di testo è un contenitore. I COMANDI RESTANO PILLOLE. */
  --radius-control: 999px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --border-width: 1px;
  --border-dashed: 1px dashed var(--color-neutral-300);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 0, 0, 0.06);

  /* --- movimento -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* --- livelli ---------------------------------------------------------- */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* --- sovrapposizioni su fotografia ------------------------------------ */
  --color-overlay-dark: rgba(0, 0, 0, 0.6);
  --color-text-inverse-strong: rgba(255, 255, 255, 0.8);
  --color-text-inverse-muted: rgba(255, 255, 255, 0.5);
  --color-border-inverse-subtle: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   4. LA LASTRA — oltre il design system, e fuori dal tema
   Una fotografia non si inverte: il provino resta campo caldo profondo in
   entrambi i temi, come una lastra appoggiata su un tavolo.
   ====================================================================== */

:root {
  --plate-top:    #2B2721;
  --plate-bottom: #141210;
  --plate-lit:    rgba(214, 200, 173, 0.26);
  --plate-grain:  #D8CFC0;
  --plate-mark:   rgba(233, 227, 215, 0.42);
  --plate-veil:   #100E0C;
  --on-plate:     #EFEBE4;
  --on-plate-mut: #A69F96;

  /* Il nero che sta SOPRA l'oro dentro la lastra. Non è --color-brand-on:
     quello segue il tema, e la lastra no — su un provino il testo su oro
     resta scuro anche a pagina chiara. */
  --on-plate-brand: #131211;

  /* La scena: una lastra più profonda, per le vedute larghe. Tre fermate,
     dal bruno caldo in alto al velo in basso. */
  --plate-scene-top: #332D26;
  --plate-scene-mid: #1B1815;
}

/* ==========================================================================
   5. IL CROMO — la testata, misurata una volta per tutte e due le superfici
   Valori scelti al banco di prova (vetrina/lab-intestazione.html):
   cella 66px, marchio al 38% della cella, riquadro di una riga sola.
   Il marchio è alto uguale nei due stati: cambia l'incisione, non la scala.
   ====================================================================== */

:root {
  /* quanto la testata sta staccata dai bordi: è ciò che la fa galleggiare */
  --chrome-gap: clamp(12px, 1.6vw, 24px);

  /* l'altezza di OGNI cella, dichiarata una volta sola. Il gruppo di sinistra
     ne impila due: marchio+selettore sopra, navigazione sotto */
  --chrome-cell: 66px;
  --mark-full: 25px;
  --mark-min: 25px;
  /* L'account chiamava la stessa misura --mark-h, perché lì il marchio ha
     un'altezza sola. Resta come alias: `.chrome__mark` la usa col rapporto
     3.738 dell'incisione. */
  --mark-h: var(--mark-full);
  --mark-respect: var(--space-5);   /* l'aria attorno al marchio, simmetrica */
  --d-chrome: 900ms;

  /* Lo spazio che la testata occupa PER LA PAGINA è una costante, non la sua
     altezza misurata: legarlo alla misura reale significava rifare il layout
     dell'intero documento a ogni fotogramma. Da lì veniva lo scatto in cima. */
  --chrome-h: calc(var(--chrome-cell) * 2 - 1px);
}

/* ==========================================================================
   5-bis. IL GUSCIO B — la colonna fissa e la barra di contesto
   Attività DC.2 · 2026-08-06. Le due misure vivevano in
   account/assets/workspace.css: sono salite qui quando il guscio è diventato
   di DUE superfici (area di lavoro e admin), perché un valore sta in un posto
   solo — DEC-049. La costruzione è in _condiviso/guscio.css.
   ====================================================================== */

:root {
  --rail-w: 252px;
  --bar-h: 64px;

  /* IL SEGNO della voce corrente nella colonna. Sono variabili e non l'oro
     scritto in chiaro perché le due superfici dicono cose diverse con lo
     stesso segno: nell'area di lavoro l'oro è il marchio, e il marchio è
     Lyfera che parla al mentore. L'ADMIN NON PARLA MAI COME LYFERA — guarda
     e ripara — quindi usa --color-accent, che questo stesso file definisce
     come «dice COSA STA SUCCEDENDO, mai chi siamo» (§1).

     ⚠️ SONO DUE, e confonderle è una regressione che il tema scuro NASCONDE.
     §1 e §2 danno all'oro due valori: --color-brand è quello LEGGIBILE come
     testo, --color-brand-rule quello saturo per i TRATTI. In tema scuro
     coincidono (#C5AE79); in tema chiaro no — il tratto usato come testo su
     fondo chiaro non si legge. Il bordo prende `-rule`, l'inchiostro prende
     `-ink`. Trovato dal controllo R2 su DC.2. */
  --guscio-rule: var(--color-brand-rule);   /* il filo a sinistra della voce */
  --guscio-ink:  var(--color-brand);        /* il testo del contatore attivo */
}

/* ==========================================================================
   6. IL PONTE — i nomi brevi già scritti
   2.200 righe di CSS usano il vocabolario abbreviato. Rinominarle tutte
   sarebbe stato riscrivere superfici approvate per un guadagno di sole
   parole: qui diventano ALIAS, e il valore resta uno solo.
   Si risolvono per tema da soli — var() si valuta al momento dell'uso.
   ⚠️ Codice NUOVO usa i nomi lunghi. Questa sezione non cresce mai.
   ====================================================================== */

:root {
  --surface:        var(--color-surface);
  --surface-subtle: var(--color-surface-subtle);
  --surface-muted:  var(--color-surface-muted);
  --backdrop:       var(--color-surface-backdrop);

  --n50:  var(--color-neutral-50);
  --n100: var(--color-neutral-100);
  --n200: var(--color-neutral-200);
  --n300: var(--color-neutral-300);
  --n400: var(--color-neutral-400);
  --n500: var(--color-neutral-500);
  --n600: var(--color-neutral-600);
  --n700: var(--color-neutral-700);
  --n800: var(--color-neutral-800);
  --n900: var(--color-neutral-900);

  --brand:       var(--color-brand);
  --brand-hover: var(--color-brand-hover);
  --brand-rule:  var(--color-brand-rule);
  --brand-fill:  var(--color-brand-fill);
  --on-brand:    var(--color-brand-on);
  --brand-tint:  var(--color-brand-light);

  --accent:      var(--color-accent);
  --accent-tint: var(--color-accent-light);

  --success: var(--color-success);
  --warning: var(--color-warning);
  --error:   var(--color-error);
  --success-tint: var(--color-success-bg);
  --warning-tint: var(--color-warning-bg);
  --error-tint:   var(--color-error-bg);

  --sans: var(--font-primary);
  --mono: var(--font-mono);

  --w-light:   var(--weight-light);
  --w-regular: var(--weight-regular);
  --w-medium:  var(--weight-medium);

  --t-xxs: var(--text-xxs);
  --t-xs:   var(--text-xs);    --t-sm:  var(--text-sm);   --t-base: var(--text-base);
  --t-md:   var(--text-md);    --t-lg:  var(--text-lg);   --t-xl:   var(--text-xl);
  --t-2xl:  var(--text-2xl);   --t-3xl: var(--text-3xl);  --t-4xl:  var(--text-4xl);
  --t-display: var(--text-display);

  --tr-tight:  var(--tracking-tight);   --tr-normal: var(--tracking-normal);
  --tr-wide:   var(--tracking-wide);    --tr-wider:  var(--tracking-wider);
  --tr-widest: var(--tracking-widest);

  --s1:  var(--space-1);   --s2:  var(--space-2);   --s3:  var(--space-3);
  --s4:  var(--space-4);   --s5:  var(--space-5);   --s6:  var(--space-6);
  --s8:  var(--space-8);   --s10: var(--space-10);  --s12: var(--space-12);
  --s16: var(--space-16);  --s20: var(--space-20);  --s24: var(--space-24);
  --s32: var(--space-32);  --s40: var(--space-40);

  --max:      var(--max-width);
  --max-read: var(--max-width-read);

  --d-fast: var(--duration-fast);
  --d-base: var(--duration-base);
  --d-slow: var(--duration-slow);
}

/* Shared action ink: filled gold is reserved for the primary command. */
:root { --studio-action: var(--color-brand); --studio-action-on: var(--color-brand-on); }

/* Reference sheets remain ivory in both themes, so their ink cannot invert. */
:root { --color-reference-ink:#1A1815; --color-reference-muted:#574F45; --color-reference-border:#6B655F; --color-reference-hover:#EBE7E0; }