/* =============================================================================
   MARCA GROUP — DESIGN SYSTEM · TOKEN
   Fonte di verità eseguibile del sistema. Tutto ciò che è un valore vive qui.

   REGOLE PER CHI MODIFICA QUESTO FILE
   1. Nessun colore, corpo, spazio o misura può essere scritto altrove:
      i fogli di stile e i componenti usano SOLO var(--marca-*).
   2. Ogni modifica qui va riportata nello stesso intervento in
      tokens/tokens.json, in File_MD/ e nello specimen (index.html).
   3. I valori marcati [DA VALIDARE] non sono ancora approvati dal brand owner.
      I valori marcati [PROPOSTA] non esistono nel brand system: li abbiamo
      introdotti noi perché il software non può farne a meno.
      L'elenco completo è in File_MD/13_NON_VALIDATO.md.

   MARCATORI USATI IN QUESTO FILE
   [DA VALIDARE]  valore presente nel brand system ma non ancora approvato
   [PROPOSTA]     valore assente dal brand system, introdotto per necessità tecnica
   [FUORI SISTEMA] valore che NON appartiene alla palette Marca — vedi File_MD/14
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FONT — due famiglie, due condizioni diverse.

   CONFIG MONO È NELLA REPO. È un file variabile a un asse solo
   (assets/fonts/ConfigMono-Variable.woff2 — «Config Mono Var» v2.001,
   asse wght 200→700), e per questo si dichiara con UNA regola sola che
   porta l'intervallo di peso invece di tre regole a peso fisso: i tre pesi
   del sistema — 400, 500, 700 — cadono dentro l'asse e il browser li
   interpola. Chi ci scrive sopra tre @font-face statiche rompe il carico.
   Il corsivo è in cartella ma NON è dichiarato qui: il sistema non norma un
   corsivo monospaziato, e un font che non è dichiarato non esiste.

   NEUE MONTREAL NON C'È ANCORA. Copiala in assets/fonts/ con i nomi indicati
   in assets/fonts/LEGGIMI.md: appena i file sono presenti queste regole li
   caricano, senza toccare il codice. Finché mancano vale il ripiego
   dichiarato in --marca-font-primary, e le forme delle lettere che si
   leggono in pagina non sono quelle vere.

   Se anche Neue Montreal arriverà come variabile, le sue tre regole vanno
   sostituite da una sola sul modello di Config Mono qui sotto.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Regular.woff2') format('woff2'),
       url('../fonts/NeueMontreal-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Medium.woff2') format('woff2'),
       url('../fonts/NeueMontreal-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Bold.woff2') format('woff2'),
       url('../fonts/NeueMontreal-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Config Mono — una regola sola, asse di peso 200→700. NON aggiungere il .woff
   come sorgente secondaria: un browser che non legge woff2 non sa nemmeno
   interpolare un asse, quindi caricherebbe 39 KB per non usarli mai. */
@font-face {
  font-family: 'Config Mono';
  src: url('../fonts/ConfigMono-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===========================================================================
     01 · PALETTE — SEI FAMIGLIE
     Valori primitivi. NON usarli direttamente nei componenti: usa i ruoli
     semantici della sezione 02. Un primitivo dice "che colore è",
     un ruolo dice "a cosa serve" — ed è il ruolo che cambia col tema.
     ========================================================================= */

  /* Green — identità. Il colore timone del sistema. */
  --marca-green-50: #e8f8ee;
  --marca-green-100: #d1efdc;
  --marca-green-200: #abddbe;
  --marca-green-300: #84cca1;
  --marca-green-400: #5cc18a;
  --marca-green-500: #1fb573; /* Primary · Marca Green */
  --marca-green-600: #0b8e58;
  --marca-green-700: #09673e; /* Logo Deep · Marca Deep Green */
  --marca-green-800: #0f462b;
  --marca-green-900: #0b2a19;
  --marca-green-950: #06180e;

  /* Neutral — struttura. Sostiene la maggior parte dei contenuti. */
  --marca-white: #ffffff;
  --marca-neutral-50: #f4f5f7; /* Paper */
  --marca-neutral-100: #eceef1;
  --marca-neutral-200: #d5d8dc;
  --marca-neutral-300: #b8bcc3;
  --marca-neutral-400: #92979f;
  --marca-neutral-500: #6a7078;
  --marca-neutral-600: #4c5159;
  --marca-neutral-700: #353a41;
  --marca-neutral-800: #262a30;
  --marca-neutral-900: #1a1d21;
  --marca-neutral-950: #111215; /* Cold Graphite — [DA VALIDARE] come nero di sistema */

  /* Orange — accento tecnico di Engineering. Selettivo, mai palette autonoma. */
  --marca-orange-50: #fff4ee;
  --marca-orange-100: #fce7dc;
  --marca-orange-200: #f8c3aa;
  --marca-orange-300: #f29a72;
  --marca-orange-400: #ec784d;
  --marca-orange-500: #e8652e; /* Core — [DA VALIDARE] */
  --marca-orange-600: #c94a1c;
  --marca-orange-700: #9e3513;
  --marca-orange-800: #70250e;
  --marca-orange-900: #46180a;
  --marca-orange-950: #2d1007;

  /* Amber — attenzione. */
  --marca-amber-50: #fff8e8;
  --marca-amber-100: #fdecc5;
  --marca-amber-200: #f9d98b;
  --marca-amber-300: #f2be52;
  --marca-amber-400: #e8a128;
  --marca-amber-500: #d18412; /* Warning */
  --marca-amber-600: #aa6508;
  --marca-amber-700: #7a4705; /* Status/Pending */
  --marca-amber-800: #503004;
  /* I due gradini profondi non esistono nel brand system, che ferma Amber
     all'800 — [PROPOSTA]. Servono al fondo di avviso in condizione scura:
     Amber/800 ha luminanza 0,0383 contro lo 0,0124 di Alert/900, e al buio il
     fondo di «attenzione» pesava tre volte quello di «errore», invertendo la
     gerarchia che il sistema dichiara. Vedi File_MD/13. */
  --marca-amber-900: #331e02; /* [PROPOSTA] */
  --marca-amber-950: #1d1101; /* [PROPOSTA] */

  /* Cobalt — informazione. */
  --marca-cobalt-50: #f1f5ff;
  --marca-cobalt-100: #dee8fc;
  --marca-cobalt-200: #b8cdf8;
  --marca-cobalt-300: #88a8ef;
  --marca-cobalt-400: #5e83e2;
  --marca-cobalt-500: #3562d2; /* Digital */
  --marca-cobalt-600: #244dbb;
  --marca-cobalt-700: #1a3ea0; /* [FUORI SISTEMA] riservato a un'entità sotto approvazione — File_MD/14 */
  --marca-cobalt-800: #142e80;
  --marca-cobalt-900: #0f205c;
  --marca-cobalt-950: #091536;

  /* Alert — errore. */
  --marca-alert-50: #fff2f0;
  --marca-alert-100: #fce3df;
  --marca-alert-200: #f7bbb4;
  --marca-alert-300: #ef8b80;
  --marca-alert-400: #e26052;
  --marca-alert-500: #cf4435; /* Error */
  --marca-alert-600: #ad3025;
  --marca-alert-700: #83231c;
  --marca-alert-800: #5b1915;
  --marca-alert-900: #38100d;

  /* ===========================================================================
     02 · RUOLI SEMANTICI — questi cambiano col tema, i primitivi no.
     Nei componenti si usano SOLO questi.
     ========================================================================= */

  /* Superfici. Non esistono "livelli di elevazione": i campi non fluttuano.
     Un campo si distingue da un altro per superficie o per filo, mai per ombra. */
  --marca-surface: var(--marca-neutral-50); /* fondo pagina */
  --marca-field: var(--marca-white); /* superficie di campo */
  --marca-field-alt: var(--marca-neutral-100); /* campo secondario / righe alternate */
  --marca-field-sunken: var(--marca-neutral-100); /* aree di input e contenimento */
  --marca-surface-invert: var(--marca-neutral-950); /* blocco in condizione opposta */

  /* Superficie di ciò che sta SOPRA — menu, tendina, pannello, finestra,
     notifica — [PROPOSTA]. In condizione chiara è la stessa superficie di
     campo: il velo abbassa il contesto e il pannello resta dov'è.
     In condizione scura non può esserlo: il contesto è già in fondo alla
     scala e il velo non ha più dove scendere (compone 1,02:1). Quello che
     sale è allora il pannello. Vedi il blocco del tema scuro e File_MD/18. */
  --marca-surface-overlay: var(--marca-field);
  --marca-surface-overlay-alt: var(--marca-field-alt); /* riga al passaggio, dentro l'overlay */

  /* Fili. La separazione strutturale del sistema: 1px, mai spazio vuoto.
     Tre fili con tre lavori diversi, e non sono intercambiabili:
     · border         separa due campi. Non è interattivo: 1,43:1 basta.
     · border-control delimita un controllo. WCAG 1.4.11 chiede 3:1 → Neutral/500 (5,00:1).
     · border-overlay stacca una superficie che sta SOPRA un'altra. Sostituisce l'ombra
                      che il sistema vieta: è un taglio netto, non un'elevazione. */
  --marca-border: var(--marca-neutral-200);
  --marca-border-strong: var(--marca-neutral-400);
  --marca-border-subtle: var(--marca-neutral-100);
  --marca-border-control: var(--marca-neutral-500); /* [PROPOSTA] 5,00:1 su campo */
  --marca-border-overlay: var(--marca-neutral-950); /* [PROPOSTA] 17,17:1 su carta */
  --marca-border-dashed: var(--marca-neutral-500); /* [PROPOSTA] solo perimetro di rilascio file */
  --marca-border-width: 1px;

  /* Inchiostri. */
  --marca-text: var(--marca-neutral-950);
  --marca-text-muted: var(--marca-neutral-700);
  --marca-text-subtle: var(--marca-neutral-500);
  --marca-text-label: var(--marca-neutral-600); /* [PROPOSTA] etichette di campo, 7,32:1 */
  --marca-text-disabled: var(--marca-neutral-400); /* [PROPOSTA] mai per testo da leggere */
  --marca-text-invert: var(--marca-white);
  /* Inchiostro su fondo verde — [DA VALIDARE]. Il bianco dà 2,65:1 su Green/500:
     sotto ogni soglia, ed è il difetto della sorgente che File_MD/13 elenca fra
     quelli da NON ereditare. Il grafite invece regge: 7,06:1, ed è la stessa
     scelta che --marca-mark-text fa già al buio sullo stesso fondo. Resta
     contrassegnato perché il brand owner non ha ratificato un inchiostro per
     Green/500: finché non lo fa, ogni riempimento verde che porta testo o un
     glifo piccolo usa Green/700 (6,95:1, combinazione approvata) e questo ruolo
     serve ai soli campioni che devono mostrare Green/500. Vedi File_MD/13. */
  --marca-text-on-identity: var(--marca-neutral-950);
  --marca-text-on-accent: var(--marca-neutral-950); /* [DA VALIDARE] 5,65:1 su Orange/500 */

  /* Identità e profondità. Il verde non è un fondo automatico:
     si usa dove serve identità, orientamento o azione. */
  --marca-identity: var(--marca-green-500);
  --marca-identity-hover: var(--marca-green-600);
  --marca-identity-active: var(--marca-green-700);
  --marca-identity-wash: var(--marca-green-50); /* conferma di stato, MAI il segnale: 1,10:1 */
  --marca-depth: var(--marca-green-700);

  /* Il verde che porta un segno bianco. Regola: Green/500 resta identità e
     superficie di azione dove il segno è grande o assente; ogni riempimento
     verde che contiene un glifo piccolo — spunta, pomello acceso, giorno
     selezionato, riempimento di traccia, avanzamento — è Green/700. */
  --marca-mark: var(--marca-green-700); /* [PROPOSTA] */
  --marca-mark-text: var(--marca-white);
  --marca-mark-hover: var(--marca-green-800);

  /* Accento divisionale — Marca Engineering. Mai una CTA equivalente in arancio. */
  --marca-accent: var(--marca-orange-500); /* [DA VALIDARE] */
  /* Orange/700 e non 600: l'highlight tecnico dichiara un inchiostro e NON un
     fondo, quindi eredita qualunque superficie lo ospiti. Il 600 reggeva solo
     sul bianco puro (4,69:1) e cadeva sotto soglia ovunque altro — 4,30:1 su
     carta, 4,03:1 sul campo secondario. Il 700 tiene su tutte e tre:
     7,06:1 · 6,48:1 · 6,08:1. */
  --marca-accent-text: var(--marca-orange-700); /* highlight tecnico su fondo chiaro */

  /* Ruoli funzionali. Comunicano prima di caratterizzare:
     la stessa tinta mantiene lo stesso significato in tutto l'ambiente. */
  --marca-info: var(--marca-cobalt-500);
  --marca-info-wash: var(--marca-cobalt-50);
  /* Cobalt/600, non 700: il gradino 700 è riservato e non appartiene alla
     palette Marca (vedi File_MD/14). 7,36:1 su bianco. */
  --marca-info-text: var(--marca-cobalt-600);

  --marca-success: var(--marca-green-700); /* Deep Green, NON Marca Green */
  --marca-success-wash: var(--marca-green-50);
  --marca-success-text: var(--marca-green-700);

  --marca-warning: var(--marca-amber-500);
  --marca-warning-wash: var(--marca-amber-100);
  --marca-warning-text: var(--marca-amber-700); /* Status/Pending */

  --marca-error: var(--marca-alert-500);
  --marca-error-wash: var(--marca-alert-100);
  --marca-error-text: var(--marca-alert-700);

  /* Focus — [PROPOSTA] il brand system non lo definisce, ma un'interfaccia
     senza indicatore di focus non è accessibile.
     L'anello è a DUE fili: verde all'interno perché il focus è «segnale di
     attivazione» e quello è il ruolo di Marca Green; filo di contenimento
     esterno perché Green/500 da solo dà 2,43:1 su carta, sotto i 3:1 che
     WCAG 1.4.11 chiede. Due fili contigui, nessuna ombra: è la stessa
     grammatica con cui il sistema separa i campi. */
  --marca-focus-ring: var(--marca-green-500);
  --marca-focus-ring-contrast: var(--marca-neutral-950); /* [PROPOSTA] */
  --marca-focus-width: 2px;
  --marca-focus-offset: 2px;

  /* Serie dati. Green come riferimento, Deep per serie correlate,
     Orange solo per confronto o attenzione. Le serie si distinguono ANCHE
     per forma, tratteggio e label: mai solo per colore. */
  --marca-data-1: var(--marca-green-500);
  --marca-data-2: var(--marca-green-700);
  --marca-data-3: var(--marca-neutral-400);
  --marca-data-compare: var(--marca-orange-500);
  --marca-data-grid: var(--marca-neutral-200);

  /* ===========================================================================
     03 · TIPOGRAFIA
     Due famiglie, nessuna terza. Neue Montreal porta la lettura,
     Config Mono porta il dato. Ardela Edge non si compone: è solo asset.
     Il tracking è già convertito in px sul corpo indicato.
     ========================================================================= */

  --marca-font-primary: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --marca-font-mono: 'Config Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo,
    Consolas, 'Liberation Mono', monospace;

  /* Pesi — semantica fissa. Il maiuscoletto è Medium, mai Bold. */
  --marca-weight-regular: 400;
  --marca-weight-medium: 500;
  --marca-weight-bold: 700;

  /* Scala — cinque livelli dichiarati + i corpi di lavoro dell'interfaccia.
     [DA VALIDARE] il brand system dichiara i corpi "da formalizzare nella
     specifica editoriale": sono quelli costruiti, non ancora ratificati.

     I CORPI sono quelli del brand system e non si toccano. Le INTERLINEE sono
     state riquotate sul ritmo di U = 8px: il sistema dichiara a File_MD/04 che
     ogni misura chiude su U e che «se un contenuto non chiude, si adatta il
     contenuto». Le interlinee dichiarate — 58, 44, 36, 34 — non chiudevano, e
     moltiplicate per ogni riga di ogni pagina erano la ragione misurabile per
     cui le sezioni partivano su quote frazionarie. Ratificato dal supervisore
     il 1 agosto 2026. */

  /* Display · Neue Montreal Bold maiuscolo */
  --marca-type-display-size: 56px;
  --marca-type-display-lh: 56px; /* 7U — era 58; maiuscolo, nessuna discendente */
  --marca-type-display-tracking: -1.68px;

  /* Titolo · Neue Montreal Bold */
  --marca-type-title-size: 40px;
  --marca-type-title-lh: 48px; /* 6U — era 44 */
  --marca-type-title-tracking: -0.8px;

  /* Titoletto · Neue Montreal Medium maiuscolo — stesso corpo del testo corrente */
  --marca-type-subhead-size: 28px;
  --marca-type-subhead-lh: 32px; /* 4U — era 36 */
  --marca-type-subhead-tracking: -0.42px;

  /* Testo corrente · Neue Montreal Regular */
  --marca-type-body-size: 28px;
  --marca-type-body-lh: 32px; /* 4U — era 34 */
  --marca-type-body-tracking: -0.42px;

  /* Label tecnica · Config Mono Regular */
  --marca-type-label-size: 20px;
  --marca-type-label-lh: 32px; /* 4U — già sul ritmo */
  --marca-type-label-tracking: 0;

  /* Corpi di lavoro dell'interfaccia — derivati dalla stessa scala.
     Le interlinee chiudono tutte su U = 8px: è la regola che il sistema
     dichiara in File_MD/04, e vale anche per la tipografia. Un'interlinea
     fuori griglia moltiplicata per centinaia di righe è ciò che fa apparire
     una pagina «schiacciata» senza che si riesca a indicare dove. */
  --marca-type-body-l-size: 24px;
  --marca-type-body-l-lh: 32px;
  --marca-type-body-l-tracking: -0.36px;

  --marca-type-body-m-size: 20px;
  --marca-type-body-m-lh: 32px;
  --marca-type-body-m-tracking: -0.3px;

  --marca-type-text-size: 16px;
  --marca-type-text-lh: 24px;
  --marca-type-text-tracking: 0;

  --marca-type-text-s-size: 14px;
  --marca-type-text-s-lh: 24px;
  --marca-type-text-s-tracking: 0;

  --marca-type-caption-size: 12px;
  --marca-type-caption-lh: 16px;
  --marca-type-caption-tracking: 0;

  /* Config Mono — registro tecnico */
  --marca-type-mono-l-size: 24px;
  --marca-type-mono-l-lh: 32px;
  --marca-type-mono-size: 16px;
  --marca-type-mono-lh: 24px;
  --marca-type-mono-s-size: 13px;
  --marca-type-mono-s-lh: 16px;
  --marca-type-mono-xs-size: 11px;
  --marca-type-mono-xs-lh: 16px;

  /* ===========================================================================
     04 · RITMO E SPAZIO
     U = 8px è l'unità comune. Ogni spazio del sistema è un multiplo di U.
     Non esistono valori intermedi: se un contenuto non chiude sul ritmo,
     si adatta il contenuto, non il ritmo.
     ========================================================================= */

  --marca-u: 8px;

  --marca-space-1: 8px; /* 1U */
  --marca-space-2: 16px; /* 2U */
  --marca-space-3: 24px; /* 3U */
  --marca-space-4: 32px; /* 4U */
  --marca-space-5: 40px; /* 5U */
  --marca-space-6: 48px; /* 6U */
  --marca-space-8: 64px; /* 8U — riga base */
  --marca-space-10: 80px; /* 10U — margine di mezza colonna */
  --marca-space-12: 96px; /* 12U */
  --marca-space-16: 128px; /* 16U */

  /* Baseline: la riga del formato digitale. Altezze e blocchi chiudono qui. */
  --marca-baseline: 64px; /* 8U */

  /* Padding interno dei campi — costante, regola 05 della griglia. */
  --marca-field-padding: 24px; /* 3U */
  --marca-field-padding-l: 32px; /* 4U */

  /* ===========================================================================
     05 · GRIGLIA P·12 — la planimetria
     Dodici micro-colonne, gutter ZERO: i campi si toccano e si separano
     con un filo. La corsia distribuisce, la campata contiene.
     I valori in px sono quelli del formato di riferimento 1920.
     ========================================================================= */

  --marca-grid-columns: 12;
  --marca-grid-gutter: 0px; /* regola 01: nessun gutter strutturale */
  --marca-grid-column: 160px; /* 1920 / 12 */
  --marca-grid-margin: 80px; /* mezza colonna, regola 02 */
  --marca-grid-max: 1920px;

  /* Partizioni. Le aggregazioni ammesse su P·12 sono 3|9 · 3|6|3 · terzi della
     MATRICE (4|4|4 e 4|8) · mezzi 6|6 · fascia intera 12. 2|8, 3|7 e 5|5
     appartengono a M·10 — la facciata, non il digitale — e le due matrici non
     si mescolano. Vedi File_MD/04 e tokens.json. */
  --marca-rail: 3; /* corsia: navigazione, codici, orientamento */
  --marca-bay: 9; /* campata: contenuto */
  /* Un terzo della MATRICE, non della campata: 4 colonne su 12. Un terzo della
     campata varrebbe 3, cioè la corsia — vedi File_MD/04. */
  --marca-third: 4;

  /* Altezze di riga ricorrenti */
  --marca-row: 64px; /* riga base / toolbar */
  --marca-row-s: 40px; /* riga compatta, 5U */
  --marca-control-height: 48px; /* 6U — altezza dei controlli */
  --marca-control-height-s: 32px; /* 4U */
  --marca-control-height-l: 64px; /* 8U — controllo che occupa una riga base */

  /* Area di tocco minima. WCAG chiede 44px, che non chiude sul ritmo:
     il sistema alza a 48 (6U). I controlli disegnati più piccoli estendono
     l'area con uno pseudo-elemento che non partecipa al layout. */
  --marca-hit-min: 48px; /* [PROPOSTA] */

  /* ===========================================================================
     06 · FORMA
     Il raggio esiste solo sui controlli e sulle pill di stato.
     I campi hanno raggio zero e non hanno ombra: mai box, mai elevazioni.
     ========================================================================= */

  --marca-radius-field: 0;
  --marca-radius-control: 4px;
  --marca-radius-pill: 20px;

  /* Segni. Famiglia distinta dagli spazi: un segno non è uno spazio, e per
     definizione non deve chiudere sul ritmo di U. */
  --marca-active-bar: 4px; /* barra di stato attivo */
  --marca-mark-square: 8px; /* quadratino di selezione */
  --marca-track: 4px; /* traccia di slider */
  --marca-progress-height: 8px; /* barra di avanzamento */

  /* Larghezze delle superfici sovrapposte. Tutte multiple di U. */
  --marca-panel-s: 384px; /* 48U — notifica, modale piccola, pannello stretto */
  --marca-panel-m: 640px; /* 80U — modale media */
  --marca-panel-l: 960px; /* 120U — modale ampia */
  --marca-menu-min: 224px; /* 28U */
  --marca-menu-max: 320px; /* 40U — anche larghezza massima del suggerimento */
  --marca-listbox-max: 320px; /* 40U — altezza massima di una tendina */

  /* Velo di contesto sotto una superficie sovrapposta — [PROPOSTA].
     È l'UNICA trasparenza del sistema, ed è la stessa della maschera
     sulle immagini: nessun valore nuovo entra in circolo. */
  --marca-scrim: rgb(17 18 21 / 0.8);
  --marca-mask: rgb(17 18 21 / 0.8);

  /* Ombre: il sistema non le prevede. Il token esiste solo per essere
     dichiarato a zero e impedire che qualcuno ne inventi una. */
  --marca-shadow: none;

  /* ===========================================================================
     07 · MOVIMENTO — [PROPOSTA]
     Il brand system chiede movimento «breve e funzionale», «lineare, preciso e
     controllato», «progressivo ed essenziale, senza effetti superflui», e
     nessun effetto volumetrico. Non dichiara un solo numero: tutti i valori
     qui sotto sono nostri e vanno confermati.

     T = 40ms è l'unità temporale, la controparte esatta di U = 8px.
     Ogni durata e ogni ritardo del sistema è un multiplo intero di T.
     Documentazione completa: File_MD/16_MOVIMENTO.md
     ========================================================================= */

  --marca-motion-tick: 40ms; /* 1T — l'unità. Non è una durata: è il passo */

  /* Durate. Una per livello di aggregazione: la durata si legge dalla
     matrice, non dall'importanza dell'elemento. */
  --marca-motion-state: 80ms; /* 2T · un modulo — stato senza percorso */
  --marca-motion-control: 120ms; /* 3T · due-tre moduli — un controllo */
  --marca-motion-field: 160ms; /* 4T · mezzo campo — menu, tendina */
  --marca-motion-panel: 200ms; /* 5T · campo principale — sezione collassabile e riga di dettaglio in entrata, pannello laterale in uscita, avanzamento determinato */
  --marca-motion-surface: 240ms; /* 6T · fascia intera — pannello laterale in ENTRATA, unico uso nei fogli di sistema ← TETTO */

  /* Alias della prima versione. Ne resta uno solo, ed è in uso: `base` è
     `field` (160ms) e lo leggono `.mg-btn` e `.mg-nav-item` in system.css più
     i due controlli della cornice in specimen.css. Gli altri due alias —
     `fast` per `control` e `slow` per `surface` — sono stati tolti: nessun
     foglio li leggeva, e «slow» per giunta nominava il TETTO di 240ms come se
     ci fosse un gradino oltre. Chi vuole quelle due durate scrive il nome del
     livello di aggregazione, che è il solo modo dichiarato di sceglierla. */
  --marca-motion-base: var(--marca-motion-field);

  /* Cicli e decadimenti. Non sono transizioni: non rispondono al tetto. */
  --marca-motion-decay: 480ms; /* 12T — una segnalazione che si spegne */
  --marca-motion-loop: 1200ms; /* 30T — ciclo dell'avanzamento indeterminato */

  /* Orchestrazione.
     Le ultime due sono ATTESE, non transizioni, e per questo stanno fuori dal
     divieto 15 di File_MD/16 — «nessun ritardo oltre 2T dentro un'interazione»,
     che parla di `transition-delay`, cioè di un movimento differito. Qui non si
     differisce nulla: la prima decide SE aprire (10T di guardia contro
     l'apertura accidentale al passaggio del puntatore, e finché non scatta non
     è cominciata nessuna interazione), la seconda decide QUANTO a lungo restare
     leggibile. Stessa esenzione di decadimento e ciclo, un rigo sopra.
     Nessuna delle due ha uso nei fogli: il ritardo di intenzione e la
     permanenza minima si applicano da JavaScript. */
  --marca-motion-step: var(--marca-motion-tick); /* passo di cascata */
  --marca-motion-cascade-max: 480ms; /* tetto complessivo di una cascata */
  --marca-motion-intent: 400ms; /* 10T — attesa prima di aprire al passaggio */
  --marca-motion-min-visible: 400ms; /* 10T — permanenza minima di un indicatore */

  /* Curve. Quattro, e nessuna in più.
     Nessun punto di controllo fuori da [0,1]: sarebbe un rimbalzo, e il
     brand chiede movimento controllato. */
  --marca-ease-enter: cubic-bezier(0, 0, 0.2, 1); /* arriva e si ferma */
  --marca-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* parte e se ne va */
  --marca-ease-state: cubic-bezier(0.2, 0, 0.2, 1); /* reversibile, simmetrica */
  --marca-ease-linear: linear; /* cicli, misure, assi temporali */
  --marca-motion-ease: var(--marca-ease-state); /* alias della prima versione */

  /* Percorsi. Solo per il CONTENUTO dentro un contenitore fermo: un
     contenitore percorre la propria misura, oppure non si sposta affatto. */
  --marca-travel-1: 8px; /* 1U */
  --marca-travel-2: 16px; /* 2U */
  --marca-travel-3: 24px; /* 3U — massimo assoluto */

  /* ===========================================================================
     08 · LOGO
     La geometria del marchio è espressa in multipli di X, il modulo di
     proporzione. Il monogramma vale sempre Hm = 8X: quindi X si ricava
     dall'altezza del logo. Verificato sugli asset reali con scarto < 1%.
     ========================================================================= */

  --marca-logo-height: 48px; /* altezza di lavoro in interfaccia */
  --marca-logo-x: calc(var(--marca-logo-height) / 8); /* modulo X */
  --marca-logo-clear: calc(var(--marca-logo-x) * 3); /* area di rispetto preferita 3X */
  --marca-logo-clear-min: calc(var(--marca-logo-x) * 2); /* minima 2X */
  --marca-logo-clear-compact: calc(var(--marca-logo-x) * 1.5); /* compatta 1,5X */
}

/* =============================================================================
   SCALA EDITORIALE AI BREAKPOINT — [PROPOSTA]
   I cinque livelli editoriali scendono di un gradino sotto i 1024px e di due
   sotto i 640px. I corpi di lavoro dell'interfaccia NON cambiano: sono già
   dimensionati per la lettura.

   Invariante non negoziabile a ogni soglia: il titoletto ha lo stesso corpo
   del testo corrente. L'interlinea può divergere, il corpo no.
   ============================================================================= */

@media (max-width: 1024px) {
  :root {
    --marca-type-display-size: 40px;
    --marca-type-display-lh: 48px; /* 6U */
    --marca-type-display-tracking: -1.2px;

    --marca-type-title-size: 32px;
    --marca-type-title-lh: 40px; /* 5U */
    --marca-type-title-tracking: -0.64px;

    --marca-type-subhead-size: 20px;
    --marca-type-subhead-lh: 32px; /* 4U */
    --marca-type-subhead-tracking: -0.3px;

    --marca-type-body-size: 20px; /* = subhead */
    --marca-type-body-lh: 32px; /* 4U */
    --marca-type-body-tracking: -0.3px;

    --marca-type-label-size: 16px;
    --marca-type-label-lh: 24px; /* 3U */
  }
}

@media (max-width: 640px) {
  :root {
    --marca-type-display-size: 32px;
    --marca-type-display-lh: 40px; /* 5U */
    --marca-type-display-tracking: -0.96px;

    --marca-type-title-size: 24px;
    --marca-type-title-lh: 32px; /* 4U */
    --marca-type-title-tracking: -0.48px;

    --marca-type-subhead-size: 18px;
    --marca-type-subhead-lh: 24px; /* 3U */
    --marca-type-subhead-tracking: -0.27px;

    --marca-type-body-size: 18px; /* = subhead */
    --marca-type-body-lh: 24px; /* 3U */
    --marca-type-body-tracking: -0.27px;

    --marca-type-label-size: 14px;
    --marca-type-label-lh: 24px; /* 3U */
  }
}

/* Il margine di mezza colonna si riduce alle soglie strette, ma resta un
   valore del sistema: cambia in un punto solo, e tutto lo segue. */
@media (max-width: 1440px) {
  :root { --marca-grid-margin: 48px; }
}
@media (max-width: 1024px) {
  :root { --marca-grid-margin: 32px; }
}
@media (max-width: 640px) {
  :root { --marca-grid-margin: 16px; }
}

/* =============================================================================
   TEMA SCURO — "corporate dark": Graphite dominante, struttura chiara,
   segnale verde. Non è un'inversione automatica: cambiano i RUOLI,
   i primitivi restano identici.

   Attivazione: attributo data-theme="dark" sull'elemento <html>.
   ============================================================================= */

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

  --marca-surface: var(--marca-neutral-950);
  --marca-field: var(--marca-neutral-900);
  --marca-field-alt: var(--marca-neutral-800);
  --marca-field-sunken: var(--marca-neutral-800);
  --marca-surface-invert: var(--marca-neutral-50);

  /* Al buio ciò che sta sopra SALE, invece di far scendere ciò che sta sotto.
     Il velo su Graphite compone 1,02:1: la superficie di contesto non cambia,
     e nessuna opacità può abbassare una superficie già al fondo della scala.
     Neutral/700 stacca 1,63:1 dal fondo pagina contro 1,11:1 del campo, e non
     coincide con --marca-field-alt, che deve restare distinguibile come riga
     al passaggio dentro il pannello. */
  --marca-surface-overlay: var(--marca-neutral-700);
  --marca-surface-overlay-alt: var(--marca-neutral-600);

  /* I fili in condizione scura salgono di due gradini. Con Neutral/800 il
     filo dava 1,17:1 sul campo: l'impianto del sistema — «i campi si toccano
     e si separano con un filo» — semplicemente non si vedeva. */
  --marca-border: var(--marca-neutral-700);
  --marca-border-strong: var(--marca-neutral-500);
  --marca-border-subtle: var(--marca-neutral-800);
  --marca-border-control: var(--marca-neutral-400); /* Neutral/400 sul campo: 5,76:1 */
  --marca-border-overlay: var(--marca-neutral-50);
  --marca-border-dashed: var(--marca-neutral-400);

  --marca-text: var(--marca-neutral-50);
  --marca-text-muted: var(--marca-neutral-300);
  --marca-text-subtle: var(--marca-neutral-400);
  --marca-text-label: var(--marca-neutral-300);
  /* Neutral/500 e non 600: al buio il 600 dava 1,80:1 sul campo secondario
     contro i 2,53:1 della condizione chiara — il 29% in meno. Un controllo
     spento deve apparire spento, ma la sua etichetta deve continuare a dire
     QUALE azione è bloccata. */
  --marca-text-disabled: var(--marca-neutral-500);
  --marca-text-invert: var(--marca-neutral-950);
  --marca-text-on-accent: var(--marca-neutral-950);
  /* Green/500 non cambia con la condizione, e nemmeno l'inchiostro che regge
     su di lui: 7,06:1 in entrambe. Dichiarato qui perché il blocco si legga
     per intero senza saltare al chiaro. */
  --marca-text-on-identity: var(--marca-neutral-950);

  /* L'identità resta Marca Green: su Graphite regge il contrasto.
     Gli stati salgono di un gradino perché il verde profondo,
     sul fondo scuro, sparisce. */
  --marca-identity: var(--marca-green-500);
  --marca-identity-hover: var(--marca-green-400);
  --marca-identity-active: var(--marca-green-300);
  --marca-identity-wash: var(--marca-green-900);
  /* Deep Green resta Green/700 anche al buio: cambiarlo renderebbe
     inesprimibile la combinazione approvata «Deep Green + bianco». */
  --marca-depth: var(--marca-green-700);

  /* Sul fondo scuro il verde profondo sparisce: il riempimento che porta
     un segno passa a Green/500 con inchiostro grafite. */
  --marca-mark: var(--marca-green-500);
  --marca-mark-text: var(--marca-neutral-950);
  --marca-mark-hover: var(--marca-green-400);

  --marca-accent: var(--marca-orange-500);
  --marca-accent-text: var(--marca-orange-400);

  /* Ruoli funzionali sul fondo scuro: il colore di superficie resta il gradino
     scuro della famiglia, il colore di TESTO sale a un gradino leggibile.
     Deviazione dichiarata: in condizione dark "success" come testo non può
     essere Deep Green. Vedi File_MD/02_COLORE.md. */
  --marca-info: var(--marca-cobalt-400);
  --marca-info-wash: var(--marca-cobalt-950);
  --marca-info-text: var(--marca-cobalt-300);

  --marca-success: var(--marca-green-500);
  --marca-success-wash: var(--marca-green-950);
  --marca-success-text: var(--marca-green-300);

  --marca-warning: var(--marca-amber-400);
  /* Amber/900 e non 800: i quattro fondi di stato devono pesare in modo
     comparabile, altrimenti la gerarchia si legge dal fondo invece che dal
     ruolo. Luminanze: validato 0,0072 · informativo 0,0086 · errore 0,0124 ·
     attenzione 0,0164. Con Amber/800 l'attenzione valeva 0,0383, tre volte
     l'errore. */
  --marca-warning-wash: var(--marca-amber-900);
  --marca-warning-text: var(--marca-amber-200);

  --marca-error: var(--marca-alert-400);
  --marca-error-wash: var(--marca-alert-900);
  --marca-error-text: var(--marca-alert-300);

  --marca-data-1: var(--marca-green-500);
  --marca-data-2: var(--marca-green-300);
  --marca-data-3: var(--marca-neutral-500);
  --marca-data-compare: var(--marca-orange-400);
  --marca-data-grid: var(--marca-neutral-700);

  --marca-focus-ring: var(--marca-green-400);
  --marca-focus-ring-contrast: var(--marca-white);

  /* Il velo al buio resta un velo, non un nero pieno: usa il gradino più
     profondo del verde, così anche l'oscuramento appartiene al sistema. */
  --marca-scrim: rgb(6 24 14 / 0.8);
  --marca-mask: rgb(6 24 14 / 0.8);
}