/* ============================================================
   GesTask — Palette selezionabili
   ============================================================

   Sei vesti, valide in tutta l'applicazione e nel pannello di
   amministrazione. La scelta è una preferenza di lettura come il tema
   chiaro/scuro e vive nello stesso posto: un attributo sull'elemento
   radice, scritto prima del primo disegno da
   common/assets/colormode/js/palette-mode.js e ricordato nel browser.

       prime     Slate + indaco — la predefinita
       aura      Neutro + smeraldo — i colori di PrimeTek
       violet    Zinco + violetto — contrasto marcato, quasi nero
       sand      Pietra + verde acqua — caldo, ma pulito
       contrast  Massimo contrasto — bordi forti, testo pieno
       legacy    Avorio e pergamena — la veste storica di GesTask

   ── Che cosa deve dichiarare una palette ─────────────────────────

   Quasi niente, ed è il motivo per cui aggiungerne una costa poche righe.
   Il foglio dei token deriva l'intero livello semantico da due scale e da
   una rampa:

   - in tema chiaro tutto discende da `--p-surface-0…950` e
     `--p-primary-50…950`: superfici, bordi, testo, campi, sovrapposizioni,
     elenchi e navigazione sono già scritti in funzione di quei gradini;
   - in tema scuro discende dalla rampa `--p-dark-*`, tredici valori scelti
     a mano, perché le superfici scure non sono le chiare invertite.

   Una palette ridefinisce le due scale e la rampa. Tutto il resto la
   segue. Quando serve qualcosa che dalle scale non si ricava — il bordo
   volutamente forte della veste ad alto contrasto, la barra scura di
   quella storica — si aggiunge una dichiarazione mirata, e il commento
   dice perché non poteva derivare.

   ── Perché i selettori hanno due attributi ───────────────────────

   `:root` e `[data-bs-theme="dark"]` pesano uguale: una pseudo-classe o un
   attributo, cioè 0-1-0. Una palette scritta come `[data-gt-palette="x"]`
   — anch'essa 0-1-0 — vincerebbe per posizione, e in tema scuro
   sovrascriverebbe con i valori chiari le variabili che il blocco scuro
   aveva appena impostato.

   Le scale, che non dipendono dal tema, restano perciò a un attributo: non
   sono in concorrenza con niente. I blocchi che toccano il livello
   semantico ne usano due, 0-2-0, e battono le dichiarazioni di base in
   modo esplicito invece che per ordine di apparizione.

   ── Che cosa non cambia ──────────────────────────────────────────

   Forme, misure e spaziature. Una palette è una scelta di colore; se
   cambiasse anche la geometria diventerebbero sei interfacce da
   verificare invece di una. */

/* ============================================================
   Aura — neutro e smeraldo
   ============================================================

   I colori con cui PrimeTek distribuisce la libreria: è la veste che si
   vede su primeng.dev. Grigi senza dominante e accento smeraldo. */

[data-gt-palette='aura'] {
    --p-primary-50:  #ecfdf5;
    --p-primary-100: #d1fae5;
    --p-primary-200: #a7f3d0;
    --p-primary-300: #6ee7b7;
    --p-primary-400: #34d399;
    --p-primary-500: #10b981;
    --p-primary-600: #059669;
    --p-primary-700: #047857;
    --p-primary-800: #065f46;
    --p-primary-900: #064e3b;
    --p-primary-950: #022c22;

    --p-surface-0:   #ffffff;
    --p-surface-50:  #fafafa;
    --p-surface-100: #f5f5f5;
    --p-surface-200: #e5e5e5;
    --p-surface-300: #d4d4d4;
    --p-surface-400: #a3a3a3;
    --p-surface-500: #737373;
    --p-surface-600: #525252;
    --p-surface-700: #404040;
    --p-surface-800: #262626;
    --p-surface-900: #171717;
    --p-surface-950: #0a0a0a;

    --p-column-1: #10b981;
    --p-column-2: #0ea5e9;
    --p-column-3: #84cc16;
    --p-column-4: #f59e0b;
    --p-column-5: #ef4444;
    --p-column-6: #a855f7;
}

[data-gt-palette='aura'][data-bs-theme='dark'] {
    --p-dark-canvas:           #0a0a0a;
    --p-dark-field:            #131313;
    --p-dark-surface:          #171717;
    --p-dark-raised:           #1f1f1f;
    --p-dark-deep:             #272727;
    --p-dark-focus:            #2e2e2e;
    --p-dark-line:             #292929;
    --p-dark-line-strong:      #333333;
    --p-dark-field-line:       #3d3d3d;
    --p-dark-field-line-hover: #525252;
}

/* ============================================================
   Violet — zinco e violetto
   ============================================================

   Grigi appena freddi e accento violetto saturo. Il tema scuro scende più
   in basso delle altre vesti — la superficie sfiora il nero — e i bordi
   fanno più lavoro delle ombre: è il registro degli strumenti per chi
   sviluppa, dove si sta molte ore e il contrasto conta più del calore. */

[data-gt-palette='violet'] {
    --p-primary-50:  #f5f3ff;
    --p-primary-100: #ede9fe;
    --p-primary-200: #ddd6fe;
    --p-primary-300: #c4b5fd;
    --p-primary-400: #a78bfa;
    --p-primary-500: #8b5cf6;
    --p-primary-600: #7c3aed;
    --p-primary-700: #6d28d9;
    --p-primary-800: #5b21b6;
    --p-primary-900: #4c1d95;
    --p-primary-950: #2e1065;

    --p-surface-0:   #ffffff;
    --p-surface-50:  #fafafa;
    --p-surface-100: #f4f4f5;
    --p-surface-200: #e4e4e7;
    --p-surface-300: #d4d4d8;
    --p-surface-400: #a1a1aa;
    --p-surface-500: #71717a;
    --p-surface-600: #52525b;
    --p-surface-700: #3f3f46;
    --p-surface-800: #27272a;
    --p-surface-900: #18181b;
    --p-surface-950: #09090b;

    --p-column-1: #8b5cf6;
    --p-column-2: #0891b2;
    --p-column-3: #16a34a;
    --p-column-4: #ea580c;
    --p-column-5: #dc2626;
    --p-column-6: #db2777;
}

[data-gt-palette='violet'][data-bs-theme='dark'] {
    --p-dark-canvas:           #09090b;
    --p-dark-field:            #0f0f11;
    --p-dark-surface:          #121214;
    --p-dark-raised:           #18181b;
    --p-dark-deep:             #212124;
    --p-dark-focus:            #27272a;
    --p-dark-line:             #26262a;
    --p-dark-line-strong:      #303036;
    --p-dark-field-line:       #3f3f46;
    --p-dark-field-line-hover: #52525b;
}

/* ============================================================
   Sand — pietra e verde acqua
   ============================================================

   Il calore della veste storica senza il suo ingiallito: superfici pietra,
   che sono grigi con una punta di terra, e accento verde acqua. Il tema
   scuro resta bruno invece di virare al blu, che è la differenza che si
   nota davvero fra questa e le altre. */

[data-gt-palette='sand'] {
    --p-primary-50:  #f0fdfa;
    --p-primary-100: #ccfbf1;
    --p-primary-200: #99f6e4;
    --p-primary-300: #5eead4;
    --p-primary-400: #2dd4bf;
    --p-primary-500: #14b8a6;
    --p-primary-600: #0d9488;
    --p-primary-700: #0f766e;
    --p-primary-800: #115e59;
    --p-primary-900: #134e4a;
    --p-primary-950: #042f2e;

    --p-surface-0:   #ffffff;
    --p-surface-50:  #fafaf9;
    --p-surface-100: #f5f5f4;
    --p-surface-200: #e7e5e4;
    --p-surface-300: #d6d3d1;
    --p-surface-400: #a8a29e;
    --p-surface-500: #78716c;
    --p-surface-600: #57534e;
    --p-surface-700: #44403c;
    --p-surface-800: #292524;
    --p-surface-900: #1c1917;
    --p-surface-950: #0c0a09;

    --p-column-1: #14b8a6;
    --p-column-2: #0284c7;
    --p-column-3: #65a30d;
    --p-column-4: #d97706;
    --p-column-5: #dc2626;
    --p-column-6: #9333ea;
}

[data-gt-palette='sand'][data-bs-theme='dark'] {
    --p-dark-canvas:           #17130f;
    --p-dark-field:            #1d1917;
    --p-dark-surface:          #221e1b;
    --p-dark-raised:           #2b2623;
    --p-dark-deep:             #35302c;
    --p-dark-focus:            #3d3733;
    --p-dark-line:             #322c28;
    --p-dark-line-strong:      #3d3733;
    --p-dark-field-line:       #4a423d;
    --p-dark-field-line-hover: #5e544d;
}

/* ============================================================
   Contrasto — massimo contrasto
   ============================================================

   Pensata per chi fatica a distinguere superfici vicine di tono. Non è la
   veste neutra con i colori spinti: è un'altra idea di come si separano le
   cose. Qui a separare sono i bordi, non le ombre né mezzo gradino di
   grigio, e il testo è pieno invece che smorzato.

   Le tre dichiarazioni fuori scala qui sotto esistono perché è esattamente
   quello che dalle scale non si ricava: un bordo di contenuto preso da
   `--p-surface-200` sarebbe il grigio chiarissimo di tutte le altre vesti,
   che è il contrario di quello che serve. */

[data-gt-palette='contrast'] {
    --p-primary-50:  #eff6ff;
    --p-primary-100: #dbeafe;
    --p-primary-200: #bfdbfe;
    --p-primary-300: #93c5fd;
    --p-primary-400: #60a5fa;
    --p-primary-500: #1d4ed8;
    --p-primary-600: #1e40af;
    --p-primary-700: #1e3a8a;
    --p-primary-800: #172554;
    --p-primary-900: #0f172a;
    --p-primary-950: #020617;

    --p-surface-0:   #ffffff;
    --p-surface-50:  #fafafa;
    --p-surface-100: #f5f5f5;
    --p-surface-200: #e5e5e5;
    --p-surface-300: #d4d4d4;
    --p-surface-400: #a3a3a3;
    --p-surface-500: #737373;
    --p-surface-600: #525252;
    --p-surface-700: #404040;
    --p-surface-800: #262626;
    --p-surface-900: #171717;
    --p-surface-950: #0a0a0a;

    --p-column-1: #1d4ed8;
    --p-column-2: #0e7490;
    --p-column-3: #15803d;
    --p-column-4: #b45309;
    --p-column-5: #b91c1c;
    --p-column-6: #6d28d9;

    /* L'anello di messa a fuoco è più spesso e del colore primario pieno:
       chi naviga da tastiera deve vedere dove si trova senza cercarlo. */
    --p-focus-ring-width: 3px;
    --p-focus-ring-color: var(--p-primary-500);
}

[data-gt-palette='contrast']:not([data-bs-theme='dark']) {
    --p-content-border-color:          #6b6b6b;
    --p-form-field-border-color:       #525252;
    --p-form-field-hover-border-color: #171717;
    --p-form-field-placeholder-color:  #525252;
    --p-text-color:       #000000;
    --p-text-muted-color: #404040;
}

[data-gt-palette='contrast'][data-bs-theme='dark'] {
    /* Fondo e superficie coincidono, entrambi neri: a dire dove finisce una
       scheda e comincia la pagina è il bordo chiaro, non un cambio di tono
       che a questi livelli si perde. */
    --p-dark-canvas:           #000000;
    --p-dark-field:            #0a0a0a;
    --p-dark-surface:          #000000;
    --p-dark-raised:           #141414;
    --p-dark-deep:             #1f1f1f;
    --p-dark-focus:            #262626;
    --p-dark-line:             #8a8a8a;
    --p-dark-line-strong:      #a3a3a3;
    --p-dark-field-line:       #a3a3a3;
    --p-dark-field-line-hover: #d4d4d4;
    --p-dark-text:             #ffffff;
    --p-dark-text-muted:       #d4d4d4;
    --p-dark-text-strong:      #ffffff;

    --p-form-field-placeholder-color: #d4d4d4;
}

/* ============================================================
   Nord — artico
   ============================================================

   La palette Nord: azzurri desaturati e contrasto morbido. Si distingue
   dalle altre per saturazione più che per tinta — è l'unica che non ha
   nessun colore acceso — e gli accenti delle colonne vengono dalla sua
   serie Aurora invece che dai soliti sei. */

[data-gt-palette='nord'] {
    --p-primary-50:  #f5f6f8;
    --p-primary-100: #e7eaee;
    --p-primary-200: #ccd5e0;
    --p-primary-300: #a3b5cc;
    --p-primary-400: #7c96b6;
    --p-primary-500: #5e81ac;
    --p-primary-600: #4e6f97;
    --p-primary-700: #415d7e;
    --p-primary-800: #344b66;
    --p-primary-900: #2a3b51;
    --p-primary-950: #1b2735;

    --p-surface-0:   #ffffff;
    --p-surface-50:  #eceff4;
    --p-surface-100: #e5e9f0;
    --p-surface-200: #d8dee9;
    --p-surface-300: #c0c9d8;
    --p-surface-400: #8d99b0;
    --p-surface-500: #6b7793;
    --p-surface-600: #4c566a;
    --p-surface-700: #434c5e;
    --p-surface-800: #3b4252;
    --p-surface-900: #2e3440;
    --p-surface-950: #232831;

    /* Aurora: i cinque accesi di Nord, gli unici della palette. */
    --p-column-1: #81a1c1;
    --p-column-2: #a3be8c;
    --p-column-3: #ebcb8b;
    --p-column-4: #d08770;
    --p-column-5: #bf616a;
    --p-column-6: #b48ead;

    --p-priority-low:    #a3be8c;
    --p-priority-normal: #81a1c1;
    --p-priority-high:   #ebcb8b;
    --p-priority-urgent: #bf616a;
}

[data-gt-palette='nord'][data-bs-theme='dark'] {
    --p-dark-canvas:           #242933;
    --p-dark-field:            #2b313d;
    --p-dark-surface:          #2e3440;
    --p-dark-raised:           #3b4252;
    --p-dark-deep:             #434c5e;
    --p-dark-focus:            #4c566a;
    --p-dark-line:             #3d4657;
    --p-dark-line-strong:      #4c566a;
    --p-dark-field-line:       #4c566a;
    --p-dark-field-line-hover: #61708c;
}

/* ============================================================
   Brand — i colori di Gestione Servizi SPA
   ============================================================

   Ricavati dal logo campionandone i pixel, non stimati a occhio: la vela è
   #0065a5 e la foglia #7ac141. La scala primaria è costruita attorno al
   blu, che resta esattamente il suo valore al gradino 500.

   Il verde non diventa il colore secondario dell'interfaccia — sarebbe un
   secondo accento in competizione con il primo — ma torna dove un secondo
   colore serve davvero: la priorità bassa, un accento di colonna e la
   sfumatura del marchio, che riproduce l'accostamento del logo. */

[data-gt-palette='brand'] {
    --p-primary-50:  #f1f7fb;
    --p-primary-100: #dfedf6;
    --p-primary-200: #b8ddf5;
    --p-primary-300: #77c6f8;
    --p-primary-400: #3daef5;
    --p-primary-500: #0065a5;
    --p-primary-600: #00578e;
    --p-primary-700: #004977;
    --p-primary-800: #003b60;
    --p-primary-900: #002e4c;
    --p-primary-950: #001e32;

    --p-surface-0:   #ffffff;
    --p-surface-50:  #f6f9fb;
    --p-surface-100: #eef3f7;
    --p-surface-200: #dde6ee;
    --p-surface-300: #c3d1de;
    --p-surface-400: #93a6b8;
    --p-surface-500: #6b8093;
    --p-surface-600: #4e6274;
    --p-surface-700: #3b4c5c;
    --p-surface-800: #263341;
    --p-surface-900: #18222c;
    --p-surface-950: #0e161d;

    --p-column-1: #0065a5;
    --p-column-2: #7ac141;
    --p-column-3: #00a0b0;
    --p-column-4: #f0a202;
    --p-column-5: #d64545;
    --p-column-6: #6b5bd2;

    --p-priority-low: #7ac141;
}

[data-gt-palette='brand'][data-bs-theme='dark'] {
    --p-dark-canvas:           #0b141b;
    --p-dark-field:            #101c25;
    --p-dark-surface:          #14212b;
    --p-dark-raised:           #1b2b38;
    --p-dark-deep:             #243746;
    --p-dark-focus:            #2a4051;
    --p-dark-line:             #23343f;
    --p-dark-line-strong:      #2c4151;
    --p-dark-field-line:       #354c5e;
    --p-dark-field-line-hover: #48657b;
}

/* La sfumatura del logo, blu verso verde, sul nome dell'applicazione. */
[data-gt-palette='brand'] .navbar-brand,
[data-gt-palette='brand'] .app-aside-title {
    background: linear-gradient(120deg, #0065a5, #7ac141);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   Lara — l'impronta morbida di PrimeNG
   ============================================================

   Da qui in avanti i temi non cambiano solo il colore: cambiano anche la
   forma. È la differenza fra una palette e un tema, e i tre che seguono
   sono esattamente questo — in PrimeNG Lara, Nora e Material si
   riconoscono dagli angoli e dalle ombre prima che dalla tinta.

   Che la forma sia diventata cambiabile non è gratis: ha richiesto di
   portare ai token i novantatré raggi che i fogli applicativi avevano
   scritti a mano, o la bacheca sarebbe rimasta tonda mentre i pulsanti
   diventavano squadrati.

   Lara è la più morbida: angoli larghi, ombre diffuse, azzurro chiaro. */

[data-gt-palette='lara'] {
    --p-primary-50:  #eff6ff;
    --p-primary-100: #dbeafe;
    --p-primary-200: #bfdbfe;
    --p-primary-300: #93c5fd;
    --p-primary-400: #60a5fa;
    --p-primary-500: #3b82f6;
    --p-primary-600: #2563eb;
    --p-primary-700: #1d4ed8;
    --p-primary-800: #1e40af;
    --p-primary-900: #1e3a8a;
    --p-primary-950: #172554;

    --p-surface-0:   #ffffff;
    --p-surface-50:  #f9fafb;
    --p-surface-100: #f3f4f6;
    --p-surface-200: #e5e7eb;
    --p-surface-300: #d1d5db;
    --p-surface-400: #9ca3af;
    --p-surface-500: #6b7280;
    --p-surface-600: #4b5563;
    --p-surface-700: #374151;
    --p-surface-800: #1f2937;
    --p-surface-900: #111827;
    --p-surface-950: #030712;

    --p-border-radius-xs:  .3125rem;
    --p-border-radius-sm:  .4375rem;
    --p-border-radius-md:  .625rem;
    --p-border-radius-lg:  .75rem;
    --p-border-radius-xl:  1rem;
    --p-border-radius-2xl: 1.25rem;
    --p-content-border-radius: 1rem;

    /* Ombre larghe e tenui, in tinta blu invece che nere: sotto una scheda
       molto arrotondata un'ombra stretta si vede come una riga. */
    --p-shadow-xs: 0 1px 3px rgba(18, 38, 63, .06);
    --p-shadow-sm: 0 2px 6px rgba(18, 38, 63, .08);
    --p-shadow-md: 0 6px 18px rgba(18, 38, 63, .10);
    --p-shadow-lg: 0 14px 34px rgba(18, 38, 63, .14);
    --p-shadow-xl: 0 26px 56px rgba(18, 38, 63, .18);
}

[data-gt-palette='lara'][data-bs-theme='dark'] {
    --p-dark-canvas:           #030712;
    --p-dark-field:            #0b111f;
    --p-dark-surface:          #111827;
    --p-dark-raised:           #1a2233;
    --p-dark-deep:             #232e42;
    --p-dark-focus:            #28334a;
    --p-dark-line:             #232e42;
    --p-dark-line-strong:      #2c3a52;
    --p-dark-field-line:       #374151;
    --p-dark-field-line-hover: #4b5563;
}

/* ============================================================
   Nora — l'impronta netta
   ============================================================

   Il rovescio di Lara, e in PrimeNG è pensata così: stesso azzurro di
   famiglia, ma più profondo, angoli quasi assenti, ombre ridotte al
   minimo e bordi che si vedono. Il registro dei gestionali, dove la
   densità di informazione conta più della morbidezza. */

[data-gt-palette='nora'] {
    --p-primary-50:  #eff6ff;
    --p-primary-100: #dbeafe;
    --p-primary-200: #bfdbfe;
    --p-primary-300: #93c5fd;
    --p-primary-400: #60a5fa;
    --p-primary-500: #2563eb;
    --p-primary-600: #1d4ed8;
    --p-primary-700: #1e40af;
    --p-primary-800: #1e3a8a;
    --p-primary-900: #172554;
    --p-primary-950: #0f172a;

    --p-surface-0:   #ffffff;
    --p-surface-50:  #fafafa;
    --p-surface-100: #f4f4f5;
    --p-surface-200: #d4d4d8;
    --p-surface-300: #b8b8bf;
    --p-surface-400: #8f8f99;
    --p-surface-500: #6b6b75;
    --p-surface-600: #52525b;
    --p-surface-700: #3f3f46;
    --p-surface-800: #27272a;
    --p-surface-900: #18181b;
    --p-surface-950: #09090b;

    --p-border-radius-xs:  2px;
    --p-border-radius-sm:  3px;
    --p-border-radius-md:  4px;
    --p-border-radius-lg:  5px;
    --p-border-radius-xl:  6px;
    --p-border-radius-2xl: 8px;
    --p-content-border-radius: 6px;

    /* A separare sono i bordi: le ombre restano solo dove qualcosa
       galleggia davvero sopra il resto. */
    --p-shadow-xs: none;
    --p-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --p-shadow-md: 0 2px 6px rgba(0, 0, 0, .08);
    --p-shadow-lg: 0 6px 16px rgba(0, 0, 0, .12);
    --p-shadow-xl: 0 12px 28px rgba(0, 0, 0, .16);
}

[data-gt-palette='nora'][data-bs-theme='dark'] {
    --p-dark-canvas:           #09090b;
    --p-dark-field:            #101013;
    --p-dark-surface:          #18181b;
    --p-dark-raised:           #1f1f23;
    --p-dark-deep:             #27272a;
    --p-dark-focus:            #2e2e33;
    --p-dark-line:             #34343a;
    --p-dark-line-strong:      #3f3f46;
    --p-dark-field-line:       #46464e;
    --p-dark-field-line-hover: #5c5c66;
}

/* ============================================================
   Material — Material Design
   ============================================================

   Viola di riferimento di Material 3, angoli a quattro e otto pixel e le
   elevazioni a due livelli della specifica: un'ombra stretta e scura per
   il contatto, una larga e chiara per l'altezza. L'onda al clic, che è
   l'altro tratto di Material, il sistema di componenti ce l'ha già. */

[data-gt-palette='material'] {
    --p-primary-50:  #f6edff;
    --p-primary-100: #eaddff;
    --p-primary-200: #d0bcff;
    --p-primary-300: #b69df8;
    --p-primary-400: #9a82db;
    --p-primary-500: #6750a4;
    --p-primary-600: #5b4791;
    --p-primary-700: #4f3d7e;
    --p-primary-800: #43336c;
    --p-primary-900: #381e72;
    --p-primary-950: #21005d;

    --p-surface-0:   #ffffff;
    --p-surface-50:  #fef7ff;
    --p-surface-100: #f7f2fa;
    --p-surface-200: #e7e0ec;
    --p-surface-300: #cac4d0;
    --p-surface-400: #aea9b4;
    --p-surface-500: #79747e;
    --p-surface-600: #625b71;
    --p-surface-700: #49454f;
    --p-surface-800: #313033;
    --p-surface-900: #1d1b20;
    --p-surface-950: #141218;

    --p-border-radius-xs:  4px;
    --p-border-radius-sm:  4px;
    --p-border-radius-md:  8px;
    --p-border-radius-lg:  8px;
    --p-border-radius-xl:  12px;
    --p-border-radius-2xl: 16px;
    --p-content-border-radius: 12px;

    /* I cinque livelli di elevazione di Material 3. Sono a due strati di
       proposito: quello stretto e scuro dice che l'elemento tocca la
       superficie, quello largo e chiaro di quanto se ne stacca. */
    --p-shadow-xs: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px 1px rgba(0, 0, 0, .15);
    --p-shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px 2px rgba(0, 0, 0, .15);
    --p-shadow-md: 0 1px 3px rgba(0, 0, 0, .30), 0 4px 8px 3px rgba(0, 0, 0, .15);
    --p-shadow-lg: 0 2px 3px rgba(0, 0, 0, .30), 0 6px 10px 4px rgba(0, 0, 0, .15);
    --p-shadow-xl: 0 4px 4px rgba(0, 0, 0, .30), 0 8px 12px 6px rgba(0, 0, 0, .15);

    --p-column-1: #6750a4;
    --p-column-2: #006a6a;
    --p-column-3: #386a20;
    --p-column-4: #7d5700;
    --p-column-5: #ba1a1a;
    --p-column-6: #8e4585;
}

[data-gt-palette='material'][data-bs-theme='dark'] {
    --p-dark-canvas:           #141218;
    --p-dark-field:            #1d1b20;
    --p-dark-surface:          #1d1b20;
    --p-dark-raised:           #211f26;
    --p-dark-deep:             #2b2930;
    --p-dark-focus:            #36343b;
    --p-dark-line:             #49454f;
    --p-dark-line-strong:      #49454f;
    --p-dark-field-line:       #79747e;
    --p-dark-field-line-hover: #cac4d0;
}

/* ============================================================
   Legacy — la veste storica
   ============================================================

   Com'era GesTask prima del passaggio ai componenti: superfici avorio e
   pergamena, bordi e ombre in tinta calda, barra superiore scura in
   entrambi i temi.

   È l'unica palette che non passa dalle scale, e non per svista: i suoi
   colori erano stati scelti a mano uno per uno e non formano una rampa.
   Il fondo pagina e la superficie alternata, per dirne una, sono due tinte
   quasi identiche (#f0ece3 e #f2ede4) che nella scala occuperebbero lo
   stesso gradino — riscriverla come rampa significherebbe cambiarla, e
   quello che deve fare è riprodurla. I valori sono quelli recuperati dalla
   versione precedente del foglio dei token. */

[data-gt-palette='legacy']:not([data-bs-theme='dark']) {
    --p-content-background:       #faf9f6;
    --p-content-alt-background:   #f2ede4;
    --p-content-deep-background:  #ebe5d8;
    --p-content-hover-background: #ebe5d8;
    --p-content-border-color:     rgba(120, 100, 70, .14);
    --p-body-background:          #f0ece3;

    --p-text-color:          #212529;
    --p-text-hover-color:    #000000;
    --p-text-muted-color:    rgba(33, 37, 41, .72);
    --p-text-emphasis-color: #000000;

    /* Ombre in tinta calda: una grigia sopra una superficie avorio si legge
       come sporco, non come profondità. */
    --p-shadow-xs: 0 1px 3px rgba(80, 60, 30, .08);
    --p-shadow-sm: 0 2px 8px rgba(80, 60, 30, .10);
    --p-shadow-md: 0 4px 20px rgba(80, 60, 30, .12);
    --p-shadow-lg: 0 8px 32px rgba(80, 60, 30, .16);
    --p-shadow-xl: 0 12px 40px rgba(80, 60, 30, .20);

    --p-form-field-background:          #ffffff;
    --p-form-field-filled-background:   #f2ede4;
    --p-form-field-disabled-background: #ebe5d8;
    --p-form-field-border-color:        rgba(120, 100, 70, .22);
    --p-form-field-hover-border-color:  rgba(120, 100, 70, .38);

    --p-overlay-background:   #faf9f6;
    --p-overlay-border-color: rgba(120, 100, 70, .14);
    --p-overlay-color:        #212529;

    --p-list-option-focus-background: #ebe5d8;
    --p-list-option-color:            #212529;

    --p-navigation-item-color:            rgba(33, 37, 41, .72);
    --p-navigation-item-hover-color:      var(--p-primary-color);
    --p-navigation-item-hover-background: color-mix(in srgb, var(--p-primary-color) 8%, transparent);

    --p-secondary-color:          #f2ede4;
    --p-secondary-hover-color:    #ebe5d8;
    --p-secondary-contrast-color: #212529;
    --p-secondary-subtle-color:   #f2ede4;
    --p-secondary-emphasis-color: #212529;
    --p-secondary-border-color:   rgba(120, 100, 70, .18);
}

/* Il tema scuro della veste storica invece nella rampa ci sta: i suoi
   quattro blu erano già una progressione, e i bordi erano bianco
   trasparente a due opacità. */
[data-gt-palette='legacy'][data-bs-theme='dark'] {
    --p-dark-canvas:           #090f1c;
    --p-dark-field:            #0f172a;
    --p-dark-surface:          #0f172a;
    --p-dark-raised:           #1e293b;
    --p-dark-deep:             #263347;
    --p-dark-focus:            #263347;
    --p-dark-line:             rgba(255, 255, 255, .08);
    --p-dark-line-strong:      rgba(255, 255, 255, .10);
    --p-dark-field-line:       rgba(255, 255, 255, .14);
    --p-dark-field-line-hover: rgba(255, 255, 255, .26);

    /* Nel buio la barra laterale scendeva di un gradino rispetto al
       contenuto: è quello che la separava dall'area di lavoro quando il
       bordo, a otto centesimi di opacità, quasi non si vedeva. */
    --p-aside-background: #121a2b;
}

/* La barra scura in entrambi i temi è il tratto più riconoscibile di questa
   veste: era un nastro slate-900 sopra una pagina avorio. Vale per il tema
   chiaro e per quello scuro, quindi è dichiarata una volta sola — con due
   attributi, per la stessa ragione di specificità detta in cima. */
[data-gt-palette='legacy'][data-bs-theme],
[data-gt-palette='legacy']:not([data-bs-theme]) {
    --p-header-background:        rgba(15, 23, 42, .92);
    --p-header-border-color:      rgba(255, 255, 255, .06);
    --p-header-color:             rgba(255, 255, 255, .72);
    --p-header-hover-color:       #ffffff;
    --p-header-hover-background:  rgba(255, 255, 255, .12);
    --p-header-active-color:      #ffffff;
    --p-header-active-background: rgba(255, 255, 255, .14);
    --p-header-field-background:  rgba(255, 255, 255, .10);
    --p-header-field-border:      rgba(255, 255, 255, .16);
    --p-header-badge-ring:        #121c31;

    /* Il marchio tornava a essere una scritta in sfumatura sul nastro
       scuro: è il dettaglio che la palette storica aveva e quella nuova,
       su fondo chiaro, non poteva permettersi. */
    --p-header-brand-color: transparent;
}

[data-gt-palette='legacy'] .navbar-brand {
    background: linear-gradient(135deg, #818cf8, #06b6d4);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-gt-palette='legacy'] .app-aside-title {
    background: linear-gradient(135deg, var(--p-primary-color), var(--p-cyan-500));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   Colori distinguibili — asse indipendente
   ============================================================

   Non è una veste: è un interruttore che si combina con tutte.

   Il motivo per cui è separato è che risolve un problema diverso.
   «Contrasto» aiuta chi fatica a distinguere toni vicini; questo aiuta chi
   confonde le tinte — verde e rosso in testa, che è la coppia su cui
   l'applicazione appoggia il significato di «bassa» e «urgente». Le due
   difficoltà non vanno insieme, e chi ha la seconda non deve rinunciare
   alla veste che preferisce per avere colori leggibili.

   Tenerli su due assi non moltiplica i casi da verificare perché i due
   insiemi di token sono disgiunti: le vesti toccano superfici, bordi e
   testo, questo tocca solo i colori che *portano un'informazione* —
   priorità, accenti di colonna e stati.

   I valori sono la scala di Okabe e Ito, costruita perché le sue tinte
   restino distinte in deuteranopia e protanopia: si separano anche
   sull'asse blu-giallo e per luminanza, non solo per tonalità.

   Dove il colore era già accompagnato da un'etichetta — le pillole di
   priorità sulle schede — non cambia niente di sostanziale. Dove era
   l'unico canale, e cioè le barre del Gantt, cambia tutto. */

[data-gt-safe-colors] {
    --p-priority-low:    #009e73;  /* verde-blu */
    --p-priority-normal: #0072b2;  /* blu */
    --p-priority-high:   #e69f00;  /* arancio */
    --p-priority-urgent: #d55e00;  /* vermiglio */

    --p-column-1: #0072b2;
    --p-column-2: #e69f00;
    --p-column-3: #009e73;
    --p-column-4: #cc79a7;
    --p-column-5: #d55e00;
    --p-column-6: #56b4e9;

    --p-success-color:        #009e73;
    --p-success-hover-color:  #00805d;
    --p-success-border-color: color-mix(in srgb, #009e73 35%, transparent);
    --p-success-subtle-color: color-mix(in srgb, #009e73 12%, transparent);

    --p-warn-color:        #e69f00;
    --p-warn-hover-color:  #bd8300;
    --p-warn-border-color: color-mix(in srgb, #e69f00 35%, transparent);
    --p-warn-subtle-color: color-mix(in srgb, #e69f00 14%, transparent);

    --p-danger-color:        #d55e00;
    --p-danger-hover-color:  #b04d00;
    --p-danger-border-color: color-mix(in srgb, #d55e00 35%, transparent);
    --p-danger-subtle-color: color-mix(in srgb, #d55e00 12%, transparent);
}

/* Il testo saturo su fondo tenue va scelto per tema: in chiaro deve essere
   più scuro della tinta piena, in scuro più chiaro. È l'unica parte che i
   `color-mix` non possono risolvere da soli. */
[data-gt-safe-colors]:not([data-bs-theme='dark']) {
    --p-success-emphasis-color: #00694c;
    --p-warn-emphasis-color:    #8f6400;
    --p-danger-emphasis-color:  #8f3f00;
}

[data-gt-safe-colors][data-bs-theme='dark'] {
    --p-success-color:          #35c99f;
    --p-success-hover-color:    #5fd9b6;
    --p-success-emphasis-color: #5fd9b6;

    --p-warn-color:          #f2b93b;
    --p-warn-hover-color:    #f7cd6d;
    --p-warn-emphasis-color: #f7cd6d;

    --p-danger-color:          #f57f3a;
    --p-danger-hover-color:    #f9a06d;
    --p-danger-emphasis-color: #f9a06d;

    --p-priority-low:    #35c99f;
    --p-priority-normal: #56b4e9;
    --p-priority-high:   #f2b93b;
    --p-priority-urgent: #f57f3a;
}

/* ============================================================
   Transizione fra le palette
   ============================================================

   Il passaggio da una palette all'altra tocca ogni superficie della
   pagina. Senza una sfumatura è uno scatto secco che sembra un
   ricaricamento; con una troppo lunga sembra che l'applicazione stia
   caricando qualcosa. La classe viene messa dallo script per la sola
   durata del cambio e poi tolta: lasciata sempre attiva, farebbe sfumare
   anche gli stati al passaggio del mouse. */

.palette-transition,
.palette-transition *,
.palette-transition *::before,
.palette-transition *::after {
    transition:
        background-color .28s ease,
        border-color .28s ease,
        color .28s ease,
        box-shadow .28s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    .palette-transition,
    .palette-transition *,
    .palette-transition *::before,
    .palette-transition *::after {
        transition: none !important;
    }
}