/*
  DESIGN SYSTEM SYNERGY — BRD Innova / Kraken RT30
  Generato 2026-08-05. NON modificare a mano: si rigenera dalle fonti.

  FONTI (in ordine di autorita'):
   1. Figma live get_variable_defs su nodo 2235:93543 (pagina Design System) — risolve TUTTI gli alias.
   2. figma-export/anchored-variables[2026-08-04_14-20].csv — struttura e nomi delle 196 variabili.
   3. gemini-code-1785849684217.html — scala ombre. DOPPIO CHECK SUPERATO:
      Gemini XS = 0 0 8px 1px #DFE3E8; Figma XS = radius 8, spread 1, Neutral/100. Identici.

  REGOLA (Ray, 2026-08-05): i componenti usano SOLO i TOKENS (alias semantici).
  Mai un primitivo direttamente, mai un hex scritto a mano in un componente.

  ERRORE TROVATO nella trascrizione Gemini (tokens-semantic-aliases.md):
   diceva txt-primary = Neutral/900 (#0D0F11). Figma: #040A16, che e' Primary/900. Vince Figma.
*/

:root {

  /* ═════ PRIMITIVI — mai nei componenti: esistono per essere referenziati dagli alias ═════ */

  /* Shades */
  --shades-black: #000000;
  --shades-white: #FFFFFF;

  /* Neutral */
  --neutral-50: #F7F8F9;
  --neutral-100: #DFE3E8;
  --neutral-200: #C0C7D2;
  --neutral-300: #A0ABBB;
  --neutral-400: #8996AA;
  --neutral-500: #64748B;
  --neutral-600: #4B5768;
  --neutral-700: #38414E;
  --neutral-800: #1F242B;
  --neutral-900: #0D0F11;

  /* Primary */
  --primary-50: #F2F6FD;
  --primary-100: #BFD2F4;
  --primary-200: #7EA4EA;
  --primary-300: #5889E3;
  --primary-400: #316EDD;
  --primary-500: #1E53B4;
  --primary-600: #184392;
  --primary-700: #112F65;
  --primary-800: #0B1F44;
  --primary-900: #040A16;

  /* Secondary */
  --secondary-50: #FCFDFF;

  /* Tertiary */
  --tertiary-50: #F4F7FB;
  --tertiary-100: #C9D5ED;
  --tertiary-200: #9DB3DF;
  --tertiary-300: #6789CD;
  --tertiary-400: #4670C2;
  --tertiary-500: #375CA6;
  --tertiary-600: #2D4B87;
  --tertiary-700: #263F72;
  --tertiary-800: #182849;
  --tertiary-900: #070C15;

  /* Secondary */
  --secondary-100: #E3EAFF;
  --secondary-200: #C7D5FF;
  --secondary-300: #B2C5FF;
  --secondary-400: #8FAAFF;
  --secondary-500: #7395FF;
  --secondary-600: #2E60FF;
  --secondary-700: #0033D0;
  --secondary-800: #001C74;
  --secondary-900: #000B2E;

  /* Success */
  --success-50: #F2FDF4;
  --success-100: #D7FADD;
  --success-200: #A3F4D0;
  --success-300: #7BEF8E;
  --success-400: #46E961;
  --success-500: #17BF33;
  --success-600: #139B29;
  --success-700: #0E7720;
  --success-800: #0A5416;
  --success-900: #04240A;

  /* Warning */
  --warning-50: #FFFBEA;
  --warning-100: #FFF2C0;
  --warning-200: #FFECA1;
  --warning-300: #FFE477;
  --warning-400: #FFDB4D;
  --warning-500: #FFD52D;
  --warning-600: #F4C300;
  --warning-700: #BC9600;
  --warning-800: #836900;
  --warning-900: #382D00;

  /* Error */
  --error-50: #FFF0F0;
  --error-100: #FFD3D1;
  --error-200: #FE9995;
  --error-300: #FE5149;
  --error-400: #FE251B;
  --error-500: #CC0A01;
  --error-600: #B30901;
  --error-700: #990701;
  --error-800: #730601;
  --error-900: #400300;

  /* General */
  --general-0: #FCFCFC;

  /* ═════ TOKENS — alias semantici: SOLO questi nei componenti ═════ */

  /* Text */
  --text-txt-primary: #040A16;

  /* icon/icon/Icon Button */
  --icon-icon-icon-button-icn-btt-strk-default: #C7D5FF;
  --icon-icon-icon-button-icn-btt-content-default: #64748B;
  --icon-icon-icon-button-icn-btt-bg-hover: #E3EAFF;
  --icon-icon-icon-button-icn-btt-strk-hover: #C7D5FF;
  --icon-icon-icon-button-icn-btt-content-hover: #64748B;
  --icon-icon-icon-button-icn-btt-bg-pressed: #C7D5FF;
  --icon-icon-icon-button-icn-btt-strk-pressed: #C7D5FF;
  --icon-icon-icon-button-icn-btt-content-pressed: #64748B;
  --icon-icon-icon-button-icn-btt-bg-disabled: #DFE3E8;
  --icon-icon-icon-button-icn-btt-strk-disabled: #DFE3E8;
  --icon-icon-icon-button-icn-btt-content-disabled: #FFFFFF;

  /* icon/icon/Icon Primary */
  --icon-icon-icon-primary-icn-primary-content-default: #64748B;
  --icon-icon-icon-primary-icn-primary-bg-hover: #E3EAFF;
  --icon-icon-icon-primary-icn-primary-content-hover: #64748B;
  --icon-icon-icon-primary-icn-primary-bg-pressed: #C7D5FF;
  --icon-icon-icon-primary-icn-primary-content-pressed: #64748B;
  --icon-icon-icon-primary-icn-primary-content-disabled: #C0C7D2;

  /* icon/icon/Icon Secondary */
  --icon-icon-icon-secondary-icn-secondary-content-default: #FFFFFF;
  --icon-icon-icon-secondary-icn-secondary-bg-hover: #8FAAFF;
  --icon-icon-icon-secondary-icn-secondary-content-hover: #FFFFFF;
  --icon-icon-icon-secondary-icn-secondary-bg-pressed: #B2C5FF;
  --icon-icon-icon-secondary-icn-secondary-content-pressed: #FFFFFF;
  --icon-icon-icon-secondary-icn-secondary-content-disabled: #C0C7D2;

  /* Text */
  --text-txt-secondary: #64748B;
  --text-txt-tertiary: #C0C7D2;
  --text-txt-negative: #FFFFFF;

  /* Button/Primary */
  --button-primary-btt-primary-default: #1E53B4;
  --button-primary-btt-primary-hover: #316EDD;
  --button-primary-btt-primary-pressed: #5889E3;
  --button-primary-btt-primary-disabled: #DFE3E8;
  --button-primary-btt-primary-content: #FFFFFF;

  /* Input */
  --input-input-default-strk: #C9D5ED;
  --input-input-error-strk: #CC0A01;
  --input-input-disabled-strk: #DFE3E8;

  /* Card */
  --card-bg-sy-card: #F7F8F9;
  --card-bg-sy-card-disabled: #DFE3E8;

  /* Background */
  --background-bg-primary: #FCFCFC;
  --background-bg-navbar: #375CA6;
  --background-bg-headerlateralsection: #6789CD;
  --background-background-sy-sections: #FFFFFF;

  /* Alert */
  --alert-alert-bg-error: #FAC3BF;
  --alert-alert-txt-error: #9E423C;
  --alert-alert-bg-warning: #FCF3BD;
  --alert-alert-txt-warning: #816320;
  --alert-alert-bg-success: #C0EBA2;
  --alert-alert-txt-success: #3E6732;
  --alert-alert-bg-info: #C4E4F1;
  --alert-alert-txt-info: #295F7C;

  /* Button/Secondary */
  --button-secondary-btt-secondary-default: #B2C5FF;
  --button-secondary-btt-secondary-hover: #C7D5FF;
  --button-secondary-btt-secondary-pressed: #E3EAFF;
  --button-secondary-btt-secondary-disabled: #DFE3E8;
  --button-secondary-btt-secondary-main-content: #040A16;
  --button-secondary-btt-secondary-extra-content: #FFFFFF;

  /* Button/Tertiary */
  --button-tertiary-btt-tertiary-strk-default: #C7D5FF;
  --button-tertiary-btt-tertiary-hover: #E3EAFF;
  --button-tertiary-btt-tertiary-strk-hover: #C7D5FF;
  --button-tertiary-btt-tertiary-pressed: #C7D5FF;
  --button-tertiary-btt-tertiary-strk-pressed: #C7D5FF;
  --button-tertiary-btt-tertiary-disabled: #DFE3E8;
  --button-tertiary-btt-tertiary-strk-disabled: #DFE3E8;
  --button-tertiary-btt-tertiary-main-content: #040A16;
  --button-tertiary-btt-tertiary-extra-content: #FFFFFF;

  /* Button/Confirm Primary */
  --button-confirm-primary-btt-confirm-primary-default: #139B29;
  --button-confirm-primary-btt-confirm-primary-hover: #17BF33;
  --button-confirm-primary-btt-confirm-primary-pressed: #0E7720;
  --button-confirm-primary-btt-confirm-primary-disabled: #D7FADD;
  --button-confirm-primary-btt-confirm-primary-content: #FFFFFF;

  /* Button/Confirm Secondary */
  --button-confirm-secondary-btt-confirm-secondary-strk-default: #139B29;
  --button-confirm-secondary-btt-confirm-secondary-strk-hover: #17BF33;
  --button-confirm-secondary-btt-confirm-secondary-strk-pressed: #0E7720;
  --button-confirm-secondary-btt-confirm-secondary-strk-disabled: #D7FADD;

  /* Button/Cancel Primary */
  --button-cancel-primary-btt-cancel-primary-default: #CC0A01;
  --button-cancel-primary-btt-cancel-primary-hover: #B30901;
  --button-cancel-primary-btt-cancel-primary-pressed: #990701;
  --button-cancel-primary-btt-cancel-primary-disabled: #FFD3D1;
  --button-cancel-primary-btt-cancel-primary-conten: #FFFFFF;

  /* SY/Pallet */
  --sy-pallet-pallet-empty-strk: #C0C7D2;
  --sy-pallet-pallet-to-do: #EBA007;
  --sy-pallet-pallet-to-do-locked: #F5CF83;
  --sy-pallet-pallet-to-do-button-clicked: #C3860C;
  --sy-pallet-pallet-done: #308760;
  --sy-pallet-pallet-done-locked: #97C3AF;
  --sy-pallet-pallet-error: #CC4223;
  --sy-pallet-pallet-error-locked: #EBB3A7;
  --sy-pallet-pallet-without-tools: #874FFF;
  --sy-pallet-pallet-without-tools-locked: #CFB9FF;
  --sy-pallet-pallet-manual: #E860DF;

  /* SY/Pallet/Badge */
  --sy-pallet-badge-pallet-to-do-badge: #8C5E00;
  --sy-pallet-badge-pallet-done-badge: #17402E;
  --sy-pallet-badge-pallet-error-badge: #903825;
  --sy-pallet-badge-pallet-without-tools-badge: #3E2376;

  /* Scroll Bar */
  --scroll-bar-scrollbar-default: #E7E7E7;
  --scroll-bar-scrollbar-hover: #D1D1D1;

  /* icon/icon/Icon Tertiary */
  --icon-icon-icon-tertiary-icn-tertiary-content-default: #C0C7D2;
  --icon-icon-icon-tertiary-icn-tertiary-content-hover: #8996AA;
  --icon-icon-icon-tertiary-icn-tertiary-content-pressed: #4B5768;

  /* (root) */
  --nero_brd: #221E1B;

  /* ═════ STAGING — font, spessori, larghezze ═════ */

  /* color/grey */
  --color-grey-95: #F1F1F1;

  /* width */
  --width-766: 766;

  /* stroke weight */
  --stroke-weight-1: 1;

  /* color/white */
  --color-white-solid: #FFFFFF;

  /* color/grey */
  --color-grey-82: #CCD0D4;
  --color-grey-27: #444444;

  /* font family */
  --font-family-font-1: Segoe UI;

  /* font size */
  --font-size-14: 14;

  /* font weight */
  --font-weight-400: 400;

  /* line height */
  --line-height-21: 21;

  /* ═════ ELEVAZIONE — Gemini, verificata su Figma ═════ */
  --shadow-xs: 0px 0px 8px 1px var(--neutral-100);
  --shadow-sm: 0px 0px 12px 2px var(--neutral-100);
  --shadow-md: 0px 0px 16px 3px var(--neutral-100);
  --shadow-lg: 0px 0px 20px 4px var(--neutral-100);
  --shadow-xl: 0px 0px 24px 5px var(--neutral-100);
  --shadow-none: none;

  /* ═════ TIPOGRAFIA — scala completa da Figma (Font(...) decomposto) ═════ */
  --font-caption-c1-bold: 700 10px/13px 'Plus Jakarta Sans';
  --font-caption-c1-bold-tracking: 0.100em;
  --font-caption-c1-light: 300 10px/13px 'Plus Jakarta Sans';
  --font-caption-c1-light-tracking: 0.100em;
  --font-caption-c1-medium: 500 10px/13px 'Plus Jakarta Sans';
  --font-caption-c1-medium-tracking: 0.100em;
  --font-caption-c1-regular: 400 10px/13px 'Plus Jakarta Sans';
  --font-caption-c1-regular-tracking: 0.100em;
  --font-caption-c1-semi-bold: 600 10px/13px 'Plus Jakarta Sans';
  --font-caption-c1-semi-bold-tracking: 0.100em;
  --font-caption-c2-bold: 700 8px/10px 'Plus Jakarta Sans';
  --font-caption-c2-bold-tracking: 0.100em;
  --font-caption-c2-light: 300 8px/10px 'Plus Jakarta Sans';
  --font-caption-c2-light-tracking: 0.100em;
  --font-caption-c2-medium: 500 8px/10px 'Plus Jakarta Sans';
  --font-caption-c2-medium-tracking: 0.100em;
  --font-caption-c2-regular: 400 8px/10px 'Plus Jakarta Sans';
  --font-caption-c2-regular-tracking: 0.100em;
  --font-caption-c2-semi-bold: 600 8px/10px 'Plus Jakarta Sans';
  --font-caption-c2-semi-bold-tracking: 0.100em;
  --font-heading-h1-bold: 700 24px/30px 'Plus Jakarta Sans';
  --font-heading-h1-bold-tracking: 0.000em;
  --font-heading-h1-light: 300 24px/30px 'Plus Jakarta Sans';
  --font-heading-h1-light-tracking: 0.000em;
  --font-heading-h1-medium: 500 24px/30px 'Plus Jakarta Sans';
  --font-heading-h1-medium-tracking: 0.000em;
  --font-heading-h1-regular: 400 24px/30px 'Plus Jakarta Sans';
  --font-heading-h1-regular-tracking: 0.000em;
  --font-heading-h1-semi-bold: 600 24px/30px 'Plus Jakarta Sans';
  --font-heading-h1-semi-bold-tracking: 0.000em;
  --font-heading-h2-bold: 700 22px/28px 'Plus Jakarta Sans';
  --font-heading-h2-bold-tracking: 0.100em;
  --font-heading-h2-light: 300 22px/28px 'Plus Jakarta Sans';
  --font-heading-h2-light-tracking: 0.100em;
  --font-heading-h2-medium: 500 22px/28px 'Plus Jakarta Sans';
  --font-heading-h2-medium-tracking: 0.100em;
  --font-heading-h2-regular: 400 22px/28px 'Plus Jakarta Sans';
  --font-heading-h2-regular-tracking: 0.100em;
  --font-heading-h2-semi-bold: 600 22px/28px 'Plus Jakarta Sans';
  --font-heading-h2-semi-bold-tracking: 0.100em;
  --font-heading-h3-bold: 700 20px/25px 'Plus Jakarta Sans';
  --font-heading-h3-bold-tracking: 0.100em;
  --font-heading-h3-light: 300 20px/25px 'Plus Jakarta Sans';
  --font-heading-h3-light-tracking: 0.100em;
  --font-heading-h3-medium: 500 20px/25px 'Plus Jakarta Sans';
  --font-heading-h3-medium-tracking: 0.100em;
  --font-heading-h3-regular: 400 20px/25px 'Plus Jakarta Sans';
  --font-heading-h3-regular-tracking: 0.100em;
  --font-heading-h3-semi-bold: 600 20px/25px 'Plus Jakarta Sans';
  --font-heading-h3-semi-bold-tracking: 0.100em;
  --font-heading-h4-bold: 700 18px/23px 'Plus Jakarta Sans';
  --font-heading-h4-bold-tracking: 0.200em;
  --font-heading-h4-light: 300 18px/23px 'Plus Jakarta Sans';
  --font-heading-h4-light-tracking: 0.200em;
  --font-heading-h4-medium: 500 18px/23px 'Plus Jakarta Sans';
  --font-heading-h4-medium-tracking: 0.200em;
  --font-heading-h4-regular: 400 18px/23px 'Plus Jakarta Sans';
  --font-heading-h4-regular-tracking: 0.200em;
  --font-heading-h4-semi-bold: 600 18px/23px 'Plus Jakarta Sans';
  --font-heading-h4-semi-bold-tracking: 0.200em;
  --font-heading-h5-bold: 700 16px/20px 'Plus Jakarta Sans';
  --font-heading-h5-bold-tracking: 0.100em;
  --font-heading-h5-light: 300 16px/20px 'Plus Jakarta Sans';
  --font-heading-h5-light-tracking: 0.100em;
  --font-heading-h5-medium: 500 16px/20px 'Plus Jakarta Sans';
  --font-heading-h5-medium-tracking: 0.100em;
  --font-heading-h5-regular: 400 16px/20px 'Plus Jakarta Sans';
  --font-heading-h5-regular-tracking: 0.100em;
  --font-heading-h5-semi-bold: 600 16px/20px 'Plus Jakarta Sans';
  --font-heading-h5-semi-bold-tracking: 0.100em;
  --font-paragraph-p1-bold: 700 14px/18px 'Plus Jakarta Sans';
  --font-paragraph-p1-bold-tracking: 0.100em;
  --font-paragraph-p1-light: 300 14px/18px 'Plus Jakarta Sans';
  --font-paragraph-p1-light-tracking: 0.100em;
  --font-paragraph-p1-medium: 500 14px/18px 'Plus Jakarta Sans';
  --font-paragraph-p1-medium-tracking: 0.100em;
  --font-paragraph-p1-regular: 400 14px/18px 'Plus Jakarta Sans';
  --font-paragraph-p1-regular-tracking: 0.100em;
  --font-paragraph-p1-semi-bold: 600 14px/18px 'Plus Jakarta Sans';
  --font-paragraph-p1-semi-bold-tracking: 0.100em;
  --font-paragraph-p2-bold: 700 12px/15px 'Plus Jakarta Sans';
  --font-paragraph-p2-bold-tracking: 0.200em;
  --font-paragraph-p2-light: 300 12px/15px 'Plus Jakarta Sans';
  --font-paragraph-p2-light-tracking: 0.200em;
  --font-paragraph-p2-medium: 500 12px/15px 'Plus Jakarta Sans';
  --font-paragraph-p2-medium-tracking: 0.200em;
  --font-paragraph-p2-regular: 400 12px/15px 'Plus Jakarta Sans';
  --font-paragraph-p2-regular-tracking: 0.200em;
  --font-paragraph-p2-semi-bold: 600 12px/15px 'Plus Jakarta Sans';
  --font-paragraph-p2-semi-bold-tracking: 0.200em;
  --font-paragraph-p3-bold: 700 11px/14px 'Plus Jakarta Sans';
  --font-paragraph-p3-bold-tracking: 0.100em;
  --font-paragraph-p3-light: 300 11px/14px 'Plus Jakarta Sans';
  --font-paragraph-p3-light-tracking: 0.100em;
  --font-paragraph-p3-medium: 500 11px/14px 'Plus Jakarta Sans';
  --font-paragraph-p3-medium-tracking: 0.100em;
  --font-paragraph-p3-regular: 400 11px/14px 'Plus Jakarta Sans';
  --font-paragraph-p3-regular-tracking: 0.100em;
  --font-paragraph-p3-semi-bold: 600 11px/14px 'Plus Jakarta Sans';
  --font-paragraph-p3-semi-bold-tracking: 0.100em;
}

/* NON risolti dall'export CSV: Card/bg-card, Button/Cancel Secondary/btt-cancel-secondary-strk-default, Button/Cancel Secondary/btt-cancel-secondary-strk-hover, Button/Cancel Secondary/btt-cancel-secondary-strk-pressed, Button/Cancel Secondary/btt-cancel-secondary-strk-disabled, Stroke/strk-sections, SY/Pallet/palled disabled.
   ✅ I 7 di Table & Filter NON sono più in questo elenco: risolti il 2026-08-10 con i valori
   reali di Figma (screenshot del pannello variabili inviato da Ray) — v. in fondo al blocco
   ALIAS DI PROGETTO qui sotto. */
/* ═════════════════════════════════════════════════════════════════════════
   ALIAS DI PROGETTO — NON esistono nel Figma di BRD Innova.
   Aggiunti il 2026-08-05 per ricostruire la Dashboard: il DS originale non
   definisce un alias per questi usi, quindi in Figma il designer ha applicato
   il primitivo direttamente. Qui gli si dà un nome, così i componenti
   continuano a non toccare mai un primitivo.
   Ogni riga dichiara da dove viene il valore.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  /* Bordo divisorio di card e pannelli. Figma: il componente SY/Card usa
     Neutral/100 direttamente (border-[var(--neutral/100,#dfe3e8)]). */
  --stroke-strk-sections: var(--neutral-100);

  /* Sfondo card generica (Card/bg-card è vuoto nell'export). */
  --card-bg-card: var(--shades-white);

  /* Stato "selezionato": sfondo riga lista e voce di nav attiva.
     Campionato da Dashboard.png = #E3EAFF = Secondary/100. */
  --state-selected-bg: var(--secondary-100);

  /* Bordo di enfasi della multi-selezione (spec dashboard §3: 2.5px #8FAAFF). */
  --state-multiselect-strk: var(--secondary-400);

  /* Bottone "Cancel Secondary": stroke = stesso rosso del Cancel Primary. */
  --button-cancel-secondary-btt-cancel-secondary-strk-default: var(--button-cancel-primary-btt-cancel-primary-default);
  --button-cancel-secondary-btt-cancel-secondary-strk-hover: var(--button-cancel-primary-btt-cancel-primary-hover);
  --button-cancel-secondary-btt-cancel-secondary-strk-pressed: var(--button-cancel-primary-btt-cancel-primary-pressed);
  --button-cancel-secondary-btt-cancel-secondary-strk-disabled: var(--button-cancel-primary-btt-cancel-primary-disabled);

  /* Pallet disabilitato (SY/Pallet/palled disabled, vuoto nell'export). */
  --sy-pallet-palled-disabled: var(--neutral-100);

  /* ── Table & Filter — RISOLTI il 2026-08-10 ────────────────────────────
     Erano i 7 token lasciati vuoti dall'export CSV (v. la riga "NON risolti"
     più sopra), rimasti in sospeso perché la Dashboard di Synergy non usa
     tabelle. Servono a Synapse, che è fatto di tabelle: Ray ha mandato lo
     screenshot del pannello variabili di Figma con i valori risolti.
     ⚠️ Da notare: lo stato azzurro della riga si chiama **pressed**, non
     "selected" — e vale sia per il pressed sia per la riga selezionata
     (il CSS del componente Table Body Row usa #E3EAFF per "selected"). */
  --table-filter-header: var(--tertiary-50);
  --table-filter-content: var(--shades-white);
  --table-filter-header-dropdown: var(--neutral-100);
  --table-filter-content-dropdown: var(--neutral-50);
  --table-filter-hover: var(--neutral-50);
  --table-filter-pressed: var(--secondary-100);
  --table-filter-separator-strk: var(--neutral-100);
}

/* ═════════════════════════════════════════════════════════════════════════
   ALIAS SYNAPSE — Ray, 2026-08-10: "si utilizza lo stesso identico [design
   system] per Synergy [...] solo che ovviamente hanno delle variazioni su
   certi componenti, perché uno è bordo macchina e l'altro è da scrivania".
   Quindi: STESSO file, non un secondo tokens.css. Qui vanno solo i valori che
   Synapse usa e Synergy no — presi dal CSS reale dello slot Attrezzaggio
   (screenshot 2026-08-10) o campionati dagli screenshot della sidebar.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  /* Famiglia blu/lavanda dello slot Attrezzaggio — CSS esatto fornito da Ray,
     non campionato. Nomi descrittivi, non semantici: non sappiamo ancora se
     ricorrono altrove in Synapse o sono solo di questo componente. */
  --synapse-slot-default-strk: #C9D6FF;
  --synapse-slot-inactive-strk: #DFE1E7;
  --synapse-slot-hover-bg: #E9EFFF;
  --synapse-slot-selected-bg: #D4DEFF;
  --synapse-slot-selected-strk: #9AB7FF;
  --synapse-slot-halfdata-strk: #CFDBFF;
  --synapse-slot-label-dim: #BBCBFF;
  --synapse-slot-withdata-bg: #E9EFFF;
  --synapse-slot-withdata-strk: #C9D6FF;

  /* ⚠️ Corretti il 2026-08-10 dopo il confronto con lo screenshot: la prima
     stesura usava hex campionati a occhio (#2E4E92, #F5F7FB, #E2E8F0) che NON
     erano token del DS — esattamente ciò che la regola di progetto vieta.
     Ora ogni riga punta a una variabile Figma reale.
     Riscontro: la sidebar Synapse è lo STESSO blu della Top Bar di Synergy
     (tertiary-500 #375CA6, v. figma-export/logo/README.md) — il design system
     è davvero condiviso, non solo "simile". */
  --synapse-sidebar-bg: var(--tertiary-500);
  --synapse-sidebar-item-hover: var(--tertiary-400);
  --synapse-sidebar-item-active: var(--tertiary-600);
  /* Header dei pannelli ("Dettagli Articolo", "Aggiungi Articolo"): più chiaro
     della sidebar, vira al lavanda. */
  --synapse-panel-header-bg: var(--tertiary-300);
  /* La pagina è BIANCA, non grigia: nello screenshot lista e dettaglio stanno
     su fondo pieno, separati da spazio, non da due superfici di colore diverso. */
  --synapse-page-bg: var(--shades-white);
  --synapse-panel-bg: var(--shades-white);
  --synapse-panel-strk: var(--neutral-100);
  /* Intestazione delle tabelle (lista articoli, Quote, Storico Ordini). */
  --synapse-table-header-bg: var(--secondary-100);
  /* Bottone di azione primaria in lista ("Nuovo articolo"): riempimento chiaro
     con testo blu scuro, NON blu pieno con testo bianco. */
  --synapse-btn-soft-bg: var(--secondary-200);
  --synapse-btn-soft-content: var(--primary-500);
}

/* ═════════════════════════════════════════════════════════════════════════
   GRAFICI — ⚠️ VALORI FUORI DAL DESIGN SYSTEM
   #F3F3F3 campionato da Dashboard.png sulle tracce di gauge, barra manutenzione
   e barre motore. NON corrisponde a nessuna variabile Figma: il più vicino è
   Neutral/50 #F7F8F9 (Δ ~4 punti). È un grigio scelto a mano nel Figma originale.
   Candidato n.1 della revisione spacing/colori: allinearlo a --neutral-50 o a
   --neutral-100, così anche le tracce entrano nel sistema.

   --chart-thickness: UN SOLO spessore per tutti e tre i grafici (Ray, 2026-08-06:
   "devono essere spessi allo stesso modo"). Misurato su Dashboard.png (export 1:1):
   barra manutenzione 14px · barre motore 14px · arco del gauge 14px.
   Nell'originale Figma erano GIÀ tutti e tre 14 — era il prototipo a divergere
   (16 · 14 · 26,6). Il gauge sbagliava due volte: SW 20 nel viewBox, moltiplicato
   per la scala 1,328 del pannello ingrandito. v. spacing-system.md → "Lo spessore".
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --chart-track: #F3F3F3;              /* attuale, fedele all'originale */
  --chart-track-proposta: var(--neutral-50);  /* dove andrebbe portato */
  --chart-fill: var(--tertiary-400);   /* #4670C2, verificato: è Tertiary, non Primary */
  --chart-thickness: 14px;             /* misurato 1:1 su tutti e tre. NON per modalità. */
}

/* ═════════════════════════════════════════════════════════════════════════
   SPACING — due modalità confrontabili a runtime.
   ORIGINALE = i valori misurati sul Figma di Ray (fedeltà).
   RIBILANCIATO = la revisione. Si cambia con data-spacing sull'elemento root.

   ⚠️ REVISIONE 2026-08-06 (Ray). La versione precedente del ribilanciato portava
   bordi e gap a 24 e comprava quello spazio dalla METÀ OPERATIVA della schermata.
   Ray l'ha respinta con due argomenti che cambiano il criterio:

   1. LE DUE METÀ NON VALGONO UGUALE. Sopra (lista pallet, magazzino, dettagli,
      avvia/ferma) è ciò che l'operatore TOCCA mentre lavora. Sotto (produzione,
      manutenzione, gauge, motori) è CONSULTAZIONE. Lo spazio si prende da sotto
      e si dà a sopra, mai il contrario.
   2. IL BIANCO È SPAZIO TOLTO AI DATI. È un pannello fisico a bordo macchina:
      1920px non crescono e non c'è scroll di pagina. 24px di respiro costano
      dati visibili. → si torna a 16 ai bordi e fra i blocchi.

   Resta del ribilanciato la sola cosa che Ray ha confermato: --sp-titolo 8px,
   che LEGA l'etichetta al pannello che etichetta. La gerarchia ora è il salto
   8 ↔ 16, non 8 ↔ 24: su questo schermo basta, e costa la metà.
   ═════════════════════════════════════════════════════════════════════════ */
:root, :root[data-spacing="originale"] {
  --sp-label-valore: 2px;    /* Stato produzione: label → valore */
  --sp-inforow:     10px;    /* InfoBar: fra le due righe */
  --sp-titolo:      16px;    /* titolo di sezione → il suo pannello */
  --sp-blocco:      16px;    /* blocco → blocco dentro una colonna */
  --sp-regione:     16px;    /* macro-regione → macro-regione */
  --sp-frame-pad:   16px;    /* bordo del frame → contenuto */
  --sp-lista-ctrl:  24px;    /* lista card → gruppo controlli (era 4, già corretto) */
  --sp-col-gap:     24px;    /* fra le due colonne del monitoraggio (16 fra sidebar e operativa) */
  --sp-magazzino-h: 831px;   /* altezza pannello magazzino */
  --sp-blocco-op-h: 1201px;  /* altezza della regione operativa (sidebar + colonna destra) */
  --sp-monitor-h:    463px;  /* altezza della fascia di monitoraggio */
  --sp-info-h:       104px;  /* InfoBar dettagli pallet */
  --sp-btn-panel-h:  104px;  /* pannello Avvia/Ferma: 72 di bottone + 16/16 vert. contro 24/24 lat. */
  /* Distribuzione dell'aria dentro i pannelli di monitoraggio. Valori dell'originale. */
  --sp-statfield: 0 0 104px;  /* campi larghi 104 + space-between → 69px di buco fra l'uno e l'altro */
  --sp-stat-panel-h:  86px;   /* contenuto 40 → 23/23, mentre gli altri pannelli hanno 16/16 */
  --sp-gauge-panel-h: 157px;
  --sp-gauge-col-w:   324px;
  --sp-motor-panel-h: 429px;
  --sp-motor-col-w:   352px;
  --sp-motorbar-h:    353px;  /* barra 353 in pannello 429 → 16 sopra / 60 sotto, asimmetrico */
  --sp-motor-align:   flex-start;  /* ⬅️ è ciò che produce l'asimmetria 16/60 dell'originale */
}
:root[data-spacing="ribilanciato"] {
  --sp-label-valore: 4px;    /* 2px era fuori scala e troppo stretto per 10px su 18px */
  --sp-inforow:     24px;    /* ⚠️ era 8 (2026-08-10, Ray): il pannello ha altezza fissa
                                (--sp-info-h) e le due righe stanno centrate dentro — con un
                                gap di 8 il margine sopra/sotto (~29px, quello che AVANZA)
                                era 3-4 volte il gap fra le righe: "i valori sono attaccati fra
                                loro, c'è ancora aria sopra/sotto". Aumentare il gap non cambia
                                l'altezza del pannello (resta centrato): sposta semplicemente
                                l'aria già presente dai margini al centro, dove serve. */
  --sp-titolo:       8px;    /* ⬅️ L'UNICA cosa che resta della v1: lega l'etichetta al pannello */
  --sp-blocco:      16px;    /* era 24. Il titolo sta a 8 dal suo pannello e a 16 dal precedente:
                                2:1 basta a far leggere il raggruppamento, e non costa nulla. */
  --sp-regione:     16px;
  --sp-frame-pad:   16px;    /* ⬅️ era 24 e le regioni erano larghe 1048 FISSI: risultato,
                                24 a sinistra e 8 a destra (misurato). Con 16 il conto torna:
                                1080 − 16 − 1048 − 16 = 0. */
  --sp-lista-ctrl:  24px;
  --sp-col-gap:     16px;    /* un solo gap orizzontale in tutta la schermata */

  /* ── IL BUDGET VERTICALE ───────────────────────────────────────────────
     Frame 782 = 1784 fissi. 16 + R1 + 16 + R2 + 16 + 56(barra stato) + 16 = 1784
     → R1 + R2 = 1664. Ogni pixel tolto al monitoraggio arriva alla metà operativa.
     R2 scende 463 → 439 (−24), R1 sale 1201 → 1225 (+24).
     Nota: la barra "Stato macchina" resta a y=1712 esatti, come nel Figma originale. */
  --sp-blocco-op-h: 1225px;
  --sp-monitor-h:    439px;

  /* Dove finiscono i 24px + gli 8 risparmiati dal titolo, in ordine di priorità operativa:
     +16 al pannello Avvia/Ferma (padding 24/24 su TUTTI i lati invece di 16 sopra e
         sotto contro 24 ai lati — è il difetto che Ray ha segnalato);
     +16 alla InfoBar (l'originale ha 14 sopra/sotto contro 24 ai lati: stessa asimmetria);
     il resto alla LISTA CARD, che è flex e mostra direttamente più righe.
     Il magazzino NON cresce: ha già 87px di vuoto interno, gonfiarlo produrrebbe
     altro bianco invece che altri dati. */
  --sp-magazzino-h: 831px;   /* invariato = fedele a Figma, pallet a (516,434) */
  --sp-info-h:      120px;   /* 2 righe + 24/24 */
  --sp-btn-panel-h: 120px;   /* 72 di bottone + 24/24. Con 24 anche ai lati: 24+300+40+300+24 = 688 ✓ */

  /* ── FASCIA DI MONITORAGGIO (439) ──────────────────────────────────────
     colonna sx: (18+8+88) +16+ (18+8+88) +16+ (18+8+153) = 439 ✓
     colonna dx: 18+8+413 = 439 ✓
     I due pannelli "Stato della produzione" e "Ore alla manutenzione" sono alti
     UGUALI, come chiesto da Ray.

     Ray, 2026-08-06 (2ª richiesta): «aumenta lo spazio nelle card di stato produzione e
     ore alla manutenzione, e togline un po' da utilizzo giornaliero e consumo attuale».
     L'altezza della colonna è vincolata a 439 dalla colonna motori, quindi è uno SCAMBIO
     SECCO: +16 a ciascuno dei due pannelli in alto = −32 al pannello dei gauge.
     Esito: i due pannelli densi passano a padding 24/24 (come bottoni e InfoBar), il
     pannello del gauge scende a 16/16 — e tutta la schermata usa ormai solo 16 e 24. */
  --sp-statfield: 1 1 0;      /* campi elastici: niente più buchi da 69px */
  --sp-stat-panel-h:  88px;   /* 40 di contenuto + 24/24 */
  --sp-gauge-panel-h: 153px;  /* gauge nativo 121 + 16/16. NON si scala: v. nota qui sotto */
  --sp-gauge-col-w:   328px;  /* 328 + 16 + 328 = 672 ✓ (era 324 + 24 + 324) */
  --sp-motor-panel-h: 413px;
  --sp-motor-col-w:   360px;  /* 672 + 16 + 360 = 1048 ✓ (era 672 + 24 + 352) */
  --sp-motorbar-h:    353px;  /* NATIVA, non 100%: stessa regola del gauge — un grafico non si
                                 deforma per riempire il suo pannello. Il difetto dell'originale
                                 non era la lunghezza, era l'asimmetria 16 sopra / 60 sotto:
                                 nel pannello da 413 il componente è centrato, 30/30. */
  --sp-motor-align:   center;
  /* ⚠️ IL GAUGE NON SI INGRANDISCE (Ray, 2026-08-06). La v1 lo scalava del 33% per
     togliere l'aria dal pannello — e così facendo gli ingrossava l'arco a 26,6px,
     rompendo l'uniformità con le altre due famiglie di grafico. La regola è:
     «la coerenza visiva dei componenti viene prima dello spacing perfetto».
     Il gauge sta a dimensione nativa 198×121 e l'aria attorno si accetta. */
}