/* ============================================================
   GesTask — Design token Prime
   Palette, superfici, forme e misure dell'intero sistema di componenti.
   ============================================================

   Questo foglio è la sola sorgente di verità cromatica dell'applicazione.
   Tutto il resto — componenti Prime, ponte verso Bootstrap, fogli storici —
   legge da qui e non dichiara colori propri.

   I nomi seguono la convenzione di PrimeNG (`--p-*`) invece di inventarne una
   nostra: chi conosce la libreria ritrova gli stessi token con gli stessi
   significati, e un componente Prime copiato dalla documentazione si veste da
   solo senza adattamenti.

   La direzione cromatica è Slate + Indigo: superfici grigio-blu neutre e
   accento indaco. L'indaco è lo stesso della palette precedente, quindi il
   marchio non cambia; a cambiare sono le superfici, che da avorio caldo
   diventano neutre, dove i colori di stato (verde, ambra, rosso) restano
   distinguibili anche affiancati.

   Le scale sono complete da 50 a 950 anche dove oggi usiamo tre gradini soli:
   un token mancante costringe chi aggiunge un componente a scrivere un colore
   letterale, ed è così che una palette si sfalda. */

:root {
    /* ── Scala primaria — Indigo ──────────────────────────────────── */
    --p-primary-50:  #eef2ff;
    --p-primary-100: #e0e7ff;
    --p-primary-200: #c7d2fe;
    --p-primary-300: #a5b4fc;
    --p-primary-400: #818cf8;
    --p-primary-500: #6366f1;
    --p-primary-600: #4f46e5;
    --p-primary-700: #4338ca;
    --p-primary-800: #3730a3;
    --p-primary-900: #312e81;
    --p-primary-950: #1e1b4b;

    /* ── Scala delle superfici — Slate ────────────────────────────── */
    --p-surface-0:   #ffffff;
    --p-surface-50:  #f8fafc;
    --p-surface-100: #f1f5f9;
    --p-surface-200: #e2e8f0;
    --p-surface-300: #cbd5e1;
    --p-surface-400: #94a3b8;
    --p-surface-500: #64748b;
    --p-surface-600: #475569;
    --p-surface-700: #334155;
    --p-surface-800: #1e293b;
    --p-surface-900: #0f172a;
    --p-surface-950: #020617;

    /* ── Scale di stato ───────────────────────────────────────────── */
    --p-green-50:  #f0fdf4;
    --p-green-100: #dcfce7;
    --p-green-200: #bbf7d0;
    --p-green-300: #86efac;
    --p-green-400: #4ade80;
    --p-green-500: #22c55e;
    --p-green-600: #16a34a;
    --p-green-700: #15803d;
    --p-green-800: #166534;
    --p-green-900: #14532d;

    --p-amber-50:  #fffbeb;
    --p-amber-100: #fef3c7;
    --p-amber-200: #fde68a;
    --p-amber-300: #fcd34d;
    --p-amber-400: #fbbf24;
    --p-amber-500: #f59e0b;
    --p-amber-600: #d97706;
    --p-amber-700: #b45309;
    --p-amber-800: #92400e;
    --p-amber-900: #78350f;

    --p-red-50:  #fef2f2;
    --p-red-100: #fee2e2;
    --p-red-200: #fecaca;
    --p-red-300: #fca5a5;
    --p-red-400: #f87171;
    --p-red-500: #ef4444;
    --p-red-600: #dc2626;
    --p-red-700: #b91c1c;
    --p-red-800: #991b1b;
    --p-red-900: #7f1d1d;

    --p-cyan-50:  #ecfeff;
    --p-cyan-100: #cffafe;
    --p-cyan-200: #a5f3fc;
    --p-cyan-300: #67e8f9;
    --p-cyan-400: #22d3ee;
    --p-cyan-500: #06b6d4;
    --p-cyan-600: #0891b2;
    --p-cyan-700: #0e7490;
    --p-cyan-800: #155e75;
    --p-cyan-900: #164e63;

    --p-violet-50:  #f5f3ff;
    --p-violet-100: #ede9fe;
    --p-violet-200: #ddd6fe;
    --p-violet-300: #c4b5fd;
    --p-violet-400: #a78bfa;
    --p-violet-500: #8b5cf6;
    --p-violet-600: #7c3aed;
    --p-violet-700: #6d28d9;

    /* ── Semantica: ruoli, non colori ─────────────────────────────── */
    /* I componenti leggono questi. Il tema scuro riscrive solo questa
       sezione, mai le scale sopra: una scala è una proprietà del colore,
       un ruolo è una scelta di tema. */

    --p-primary-color:            var(--p-primary-500);
    --p-primary-contrast-color:   #ffffff;
    --p-primary-hover-color:      var(--p-primary-600);
    --p-primary-active-color:     var(--p-primary-700);
    --p-primary-subtle-color:     var(--p-primary-50);
    --p-primary-emphasis-color:   var(--p-primary-700);
    --p-primary-border-color:     var(--p-primary-200);

    --p-success-color:          var(--p-green-500);
    --p-success-contrast-color: #ffffff;
    --p-success-hover-color:    var(--p-green-600);
    --p-success-subtle-color:   var(--p-green-50);
    --p-success-emphasis-color: var(--p-green-700);
    --p-success-border-color:   var(--p-green-200);

    --p-warn-color:          var(--p-amber-500);
    --p-warn-contrast-color: #ffffff;
    --p-warn-hover-color:    var(--p-amber-600);
    --p-warn-subtle-color:   var(--p-amber-50);
    --p-warn-emphasis-color: var(--p-amber-700);
    --p-warn-border-color:   var(--p-amber-200);

    --p-danger-color:          var(--p-red-500);
    --p-danger-contrast-color: #ffffff;
    --p-danger-hover-color:    var(--p-red-600);
    --p-danger-subtle-color:   var(--p-red-50);
    --p-danger-emphasis-color: var(--p-red-700);
    --p-danger-border-color:   var(--p-red-200);

    --p-info-color:          var(--p-cyan-500);
    --p-info-contrast-color: #ffffff;
    --p-info-hover-color:    var(--p-cyan-600);
    --p-info-subtle-color:   var(--p-cyan-50);
    --p-info-emphasis-color: var(--p-cyan-700);
    --p-info-border-color:   var(--p-cyan-200);

    --p-help-color:          var(--p-violet-500);
    --p-help-contrast-color: #ffffff;
    --p-help-hover-color:    var(--p-violet-600);
    --p-help-subtle-color:   var(--p-violet-50);
    --p-help-emphasis-color: var(--p-violet-700);
    --p-help-border-color:   var(--p-violet-200);

    --p-secondary-color:          var(--p-surface-100);
    --p-secondary-contrast-color: var(--p-surface-700);
    --p-secondary-hover-color:    var(--p-surface-200);
    --p-secondary-subtle-color:   var(--p-surface-50);
    --p-secondary-emphasis-color: var(--p-surface-700);
    --p-secondary-border-color:   var(--p-surface-200);

    --p-contrast-color:          var(--p-surface-950);
    --p-contrast-contrast-color: var(--p-surface-0);
    --p-contrast-hover-color:    var(--p-surface-800);

    /* ── Contenuto ────────────────────────────────────────────────── */
    --p-content-background:       var(--p-surface-0);
    --p-content-alt-background:   var(--p-surface-50);
    --p-content-deep-background:  var(--p-surface-100);
    --p-content-hover-background: var(--p-surface-100);
    --p-content-border-color:     var(--p-surface-200);
    --p-content-border-radius:    .75rem;
    --p-content-color:            var(--p-surface-800);
    --p-content-hover-color:      var(--p-surface-900);

    --p-body-background: var(--p-surface-50);

    --p-text-color:          var(--p-surface-800);
    --p-text-hover-color:    var(--p-surface-900);
    --p-text-muted-color:    var(--p-surface-500);
    --p-text-emphasis-color: var(--p-surface-900);

    /* ── Forma ────────────────────────────────────────────────────── */
    --p-border-radius-none: 0;
    --p-border-radius-xs:   .25rem;
    --p-border-radius-sm:   .375rem;
    --p-border-radius-md:   .5rem;
    --p-border-radius-lg:   .625rem;
    --p-border-radius-xl:   .875rem;
    --p-border-radius-2xl:  1.125rem;
    --p-border-radius-full: 999px;

    /* ── Elevazione ───────────────────────────────────────────────── */
    /* Ombre neutre e fredde: la tinta calda della palette precedente
       ingialliva i bordi delle superfici bianche affiancate. */
    --p-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --p-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --p-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --p-shadow-lg: 0 12px 28px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .05);
    --p-shadow-xl: 0 24px 48px rgba(15, 23, 42, .16), 0 8px 16px rgba(15, 23, 42, .06);

    /* ── Anello di messa a fuoco ──────────────────────────────────── */
    /* Un solo anello per tutta l'applicazione: la messa a fuoco deve essere
       riconoscibile allo stesso modo su un pulsante, un campo e una voce di
       menu, altrimenti chi naviga da tastiera deve reimparare a ogni zona. */
    --p-focus-ring-width:  2px;
    --p-focus-ring-style:  solid;
    --p-focus-ring-color:  var(--p-primary-400);
    --p-focus-ring-offset: 2px;
    --p-focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--p-primary-500) 22%, transparent);

    /* ── Campi di modulo ──────────────────────────────────────────── */
    --p-form-field-background:          var(--p-surface-0);
    --p-form-field-disabled-background: var(--p-surface-100);
    --p-form-field-filled-background:   var(--p-surface-50);
    --p-form-field-border-color:        var(--p-surface-300);
    --p-form-field-hover-border-color:  var(--p-surface-400);
    --p-form-field-focus-border-color:  var(--p-primary-500);
    --p-form-field-invalid-border-color: var(--p-red-400);
    --p-form-field-color:               var(--p-surface-800);
    --p-form-field-disabled-color:      var(--p-surface-400);
    --p-form-field-placeholder-color:   var(--p-surface-400);
    --p-form-field-icon-color:          var(--p-surface-400);
    --p-form-field-border-radius:       var(--p-border-radius-lg);
    --p-form-field-padding-x:           .75rem;
    --p-form-field-padding-y:           .5rem;
    --p-form-field-sm-font-size:        .875rem;
    --p-form-field-sm-padding-x:        .625rem;
    --p-form-field-sm-padding-y:        .375rem;
    --p-form-field-lg-font-size:        1.125rem;
    --p-form-field-lg-padding-x:        .875rem;
    --p-form-field-lg-padding-y:        .625rem;

    /* ── Sovrapposizioni ──────────────────────────────────────────── */
    --p-overlay-background:        var(--p-surface-0);
    --p-overlay-border-color:      var(--p-surface-200);
    --p-overlay-color:             var(--p-surface-800);
    --p-overlay-shadow:            var(--p-shadow-lg);
    --p-overlay-border-radius:     var(--p-border-radius-xl);
    --p-mask-background:           rgba(15, 23, 42, .5);
    --p-overlay-select-border-radius: var(--p-border-radius-lg);

    /* ── Elenchi ──────────────────────────────────────────────────── */
    --p-list-padding:                .25rem;
    --p-list-gap:                    .125rem;
    --p-list-option-padding:         .5rem .75rem;
    --p-list-option-border-radius:   var(--p-border-radius-md);
    --p-list-option-focus-background: var(--p-surface-100);
    --p-list-option-selected-background: var(--p-primary-50);
    --p-list-option-selected-color:  var(--p-primary-700);
    --p-list-option-color:           var(--p-surface-700);
    --p-list-option-icon-color:      var(--p-surface-400);

    /* ── Navigazione ──────────────────────────────────────────────── */
    --p-navigation-item-padding:      .5rem .75rem;
    --p-navigation-item-border-radius: var(--p-border-radius-md);
    --p-navigation-item-color:        var(--p-surface-600);
    --p-navigation-item-hover-color:  var(--p-surface-900);
    --p-navigation-item-hover-background: var(--p-surface-100);
    --p-navigation-item-active-color: var(--p-primary-600);
    --p-navigation-item-active-background: var(--p-primary-50);

    /* ── Movimento ────────────────────────────────────────────────── */
    --p-transition-duration:    .18s;
    --p-transition-fast:        .12s;
    --p-anchor-gutter:          .5rem;

    /* ── Tipografia ───────────────────────────────────────────────── */
    --p-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --p-font-size:   .9375rem;
    --p-font-size-sm: .8125rem;
    --p-font-size-xs: .75rem;
    --p-line-height: 1.5;

    /* ── Icone ────────────────────────────────────────────────────── */
    --p-icon-size:    1rem;
    --p-icon-sm-size: .875rem;
    --p-icon-lg-size: 1.25rem;

    /* ── Guscio applicativo ───────────────────────────────────────── */
    /* Misure del telaio: barra superiore e laterale. Restano token perché
       tre fogli diversi calcolano offset a partire da questi valori. */
    --p-header-height:         56px;
    --p-aside-width:           264px;
    --p-aside-width-collapsed: 72px;

    /* La barra laterale è una superficie a sé: la palette storica la vuole
       di un blu più scuro del contenuto in tema scuro, e senza un token
       proprio quella differenza andrebbe scritta come regola di componente
       dentro il foglio della palette. */
    --p-aside-background: var(--p-content-background);

    /* ── Barra superiore ──────────────────────────────────────────── */
    /* La barra ha token propri e non riusa quelli del contenuto perché non
       è sempre una superficie come le altre: la palette storica la vuole
       scura anche in tema chiaro, e il pannello di amministrazione la vuole
       di un verde molto scuro in entrambi i temi. Con i colori scritti
       dentro header.css, cambiare il fondo lasciava indietro il testo — che
       è esattamente il difetto che il pannello aveva: scuro su scuro. */
    --p-header-background:       color-mix(in srgb, var(--p-content-background) 88%, transparent);
    --p-header-border-color:     var(--p-content-border-color);
    --p-header-color:            var(--p-text-muted-color);
    --p-header-hover-color:      var(--p-text-emphasis-color);
    --p-header-hover-background: var(--p-content-hover-background);
    --p-header-active-color:     var(--p-primary-color);
    --p-header-active-background: var(--p-primary-subtle-color);
    --p-header-brand-color:      var(--p-text-emphasis-color);
    --p-header-field-background: var(--p-form-field-background);
    --p-header-field-border:     var(--p-form-field-border-color);
    /* L'anello che stacca il contatore delle notifiche dall'icona sotto:
       è del colore della barra, quindi segue la barra e non la superficie. */
    --p-header-badge-ring:       var(--p-content-background);

    /* ── Priorità delle task ──────────────────────────────────────── */
    /* Dominio applicativo, non libreria: quattro livelli che devono
       restare leggibili affiancati nella stessa colonna di board. */
    --p-priority-low:    var(--p-green-500);
    --p-priority-normal: var(--p-primary-500);
    --p-priority-high:   var(--p-amber-500);
    --p-priority-urgent: var(--p-red-500);

    /* ── Accenti delle colonne kanban (ciclici) ───────────────────── */
    --p-column-1: #6366f1;
    --p-column-2: #06b6d4;
    --p-column-3: #22c55e;
    --p-column-4: #f59e0b;
    --p-column-5: #ef4444;
    --p-column-6: #8b5cf6;
}

/* ============================================================
   Tema scuro
   ============================================================

   Riscrive i soli ruoli semantici. Le superfici scure non sono le chiare
   invertite: partono da slate-900 e salgono, così un pannello sovrapposto è
   più chiaro del fondo — nel chiaro accade il contrario, e invertire
   meccanicamente produce interfacce dove la profondità si legge al rovescio.

   Il selettore resta `[data-bs-theme="dark"]` perché è quello che lo script
   di commutazione già scrive sull'elemento radice. Cambiarlo avrebbe
   significato toccare anche il pannello di amministrazione, che condivide lo
   stesso script. */

[data-bs-theme="dark"] {
    /* ── Rampa scura ──────────────────────────────────────────────
       Nel chiaro le superfici si ricavano dalla scala `--p-surface-*`,
       letta dal basso: 0 è la carta, 50 il fondo pagina, 200 il bordo. Nel
       buio quella lettura non funziona — le superfici scure non sono le
       chiare invertite, e i tredici valori qui sotto sono scelti a mano.

       Sono raccolti in una rampa dichiarata una volta e riferita da tutto
       il resto del blocco. Non cambia niente di quello che si vede: cambia
       che una palette nuova può ridefinire tredici valori invece di
       ripescare, dentro trenta dichiarazioni semantiche, quali erano
       colori veri e quali rimandi ad altri token. */
    --p-dark-canvas:            #0b1120;  /* fondo della pagina */
    --p-dark-field:             #10182a;  /* campi di modulo */
    --p-dark-surface:           #151d2e;  /* schede e superfici */
    --p-dark-raised:            #1b2437;  /* sovrapposizioni, righe alterne */
    --p-dark-deep:              #232e44;  /* passaggio del mouse */
    --p-dark-focus:             #26314a;  /* voce a fuoco in un elenco */
    --p-dark-line:              #2a3448;  /* bordo del contenuto */
    --p-dark-line-strong:       #2f3b53;  /* bordo delle sovrapposizioni */
    --p-dark-field-line:        #33405a;
    --p-dark-field-line-hover:  #44546f;
    --p-dark-text:              var(--p-surface-200);
    --p-dark-text-muted:        var(--p-surface-400);
    --p-dark-text-strong:       var(--p-surface-50);

    --p-primary-color:          var(--p-primary-400);
    --p-primary-contrast-color: var(--p-surface-950);
    --p-primary-hover-color:    var(--p-primary-300);
    --p-primary-active-color:   var(--p-primary-200);
    --p-primary-subtle-color:   color-mix(in srgb, var(--p-primary-400) 14%, transparent);
    --p-primary-emphasis-color: var(--p-primary-300);
    --p-primary-border-color:   color-mix(in srgb, var(--p-primary-400) 32%, transparent);

    --p-success-color:          var(--p-green-400);
    --p-success-contrast-color: var(--p-surface-950);
    --p-success-hover-color:    var(--p-green-300);
    --p-success-subtle-color:   color-mix(in srgb, var(--p-green-400) 14%, transparent);
    --p-success-emphasis-color: var(--p-green-300);
    --p-success-border-color:   color-mix(in srgb, var(--p-green-400) 32%, transparent);

    --p-warn-color:          var(--p-amber-400);
    --p-warn-contrast-color: var(--p-surface-950);
    --p-warn-hover-color:    var(--p-amber-300);
    --p-warn-subtle-color:   color-mix(in srgb, var(--p-amber-400) 14%, transparent);
    --p-warn-emphasis-color: var(--p-amber-300);
    --p-warn-border-color:   color-mix(in srgb, var(--p-amber-400) 32%, transparent);

    --p-danger-color:          var(--p-red-400);
    --p-danger-contrast-color: var(--p-surface-950);
    --p-danger-hover-color:    var(--p-red-300);
    --p-danger-subtle-color:   color-mix(in srgb, var(--p-red-400) 14%, transparent);
    --p-danger-emphasis-color: var(--p-red-300);
    --p-danger-border-color:   color-mix(in srgb, var(--p-red-400) 32%, transparent);

    --p-info-color:          var(--p-cyan-400);
    --p-info-contrast-color: var(--p-surface-950);
    --p-info-hover-color:    var(--p-cyan-300);
    --p-info-subtle-color:   color-mix(in srgb, var(--p-cyan-400) 14%, transparent);
    --p-info-emphasis-color: var(--p-cyan-300);
    --p-info-border-color:   color-mix(in srgb, var(--p-cyan-400) 32%, transparent);

    --p-help-color:          var(--p-violet-400);
    --p-help-contrast-color: var(--p-surface-950);
    --p-help-hover-color:    var(--p-violet-300);
    --p-help-subtle-color:   color-mix(in srgb, var(--p-violet-400) 14%, transparent);
    --p-help-emphasis-color: var(--p-violet-300);
    --p-help-border-color:   color-mix(in srgb, var(--p-violet-400) 32%, transparent);

    --p-secondary-color:          var(--p-surface-700);
    --p-secondary-contrast-color: var(--p-surface-100);
    --p-secondary-hover-color:    var(--p-surface-600);
    --p-secondary-subtle-color:   var(--p-surface-800);
    --p-secondary-emphasis-color: var(--p-surface-200);
    --p-secondary-border-color:   var(--p-surface-700);

    --p-contrast-color:          var(--p-surface-0);
    --p-contrast-contrast-color: var(--p-surface-950);
    --p-contrast-hover-color:    var(--p-surface-100);

    --p-content-background:       var(--p-dark-surface);
    --p-content-alt-background:   var(--p-dark-raised);
    --p-content-deep-background:  var(--p-dark-deep);
    --p-content-hover-background: var(--p-dark-deep);
    --p-content-border-color:     var(--p-dark-line);
    --p-content-color:            var(--p-dark-text);
    --p-content-hover-color:      var(--p-dark-text-strong);

    --p-body-background: var(--p-dark-canvas);

    --p-text-color:          var(--p-dark-text);
    --p-text-hover-color:    var(--p-dark-text-strong);
    --p-text-muted-color:    var(--p-dark-text-muted);
    --p-text-emphasis-color: var(--p-dark-text-strong);

    /* Nel buio l'ombra non separa: a separare è il bordo. Le ombre restano
       per la sola profondità delle sovrapposizioni, più nere e più strette. */
    --p-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --p-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --p-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
    --p-shadow-lg: 0 12px 28px rgba(0, 0, 0, .5);
    --p-shadow-xl: 0 24px 48px rgba(0, 0, 0, .6);

    --p-focus-ring-color: var(--p-primary-400);
    --p-focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--p-primary-400) 28%, transparent);

    --p-form-field-background:          var(--p-dark-field);
    --p-form-field-disabled-background: var(--p-dark-raised);
    --p-form-field-filled-background:   var(--p-dark-raised);
    --p-form-field-border-color:        var(--p-dark-field-line);
    --p-form-field-hover-border-color:  var(--p-dark-field-line-hover);
    --p-form-field-focus-border-color:  var(--p-primary-400);
    --p-form-field-invalid-border-color: var(--p-red-400);
    --p-form-field-color:               var(--p-surface-100);
    --p-form-field-disabled-color:      var(--p-surface-500);
    --p-form-field-placeholder-color:   var(--p-surface-500);
    --p-form-field-icon-color:          var(--p-surface-500);

    --p-overlay-background:   var(--p-dark-raised);
    --p-overlay-border-color: var(--p-dark-line-strong);
    --p-overlay-color:        var(--p-surface-100);
    --p-mask-background:      rgba(2, 6, 23, .72);

    --p-list-option-focus-background:    var(--p-dark-focus);
    --p-list-option-selected-background: color-mix(in srgb, var(--p-primary-400) 18%, transparent);
    --p-list-option-selected-color:      var(--p-primary-200);
    --p-list-option-color:               var(--p-surface-300);
    --p-list-option-icon-color:          var(--p-surface-500);

    --p-navigation-item-color:            var(--p-surface-400);
    --p-navigation-item-hover-color:      var(--p-surface-50);
    --p-navigation-item-hover-background: var(--p-dark-focus);
    --p-navigation-item-active-color:     var(--p-primary-300);
    --p-navigation-item-active-background: color-mix(in srgb, var(--p-primary-400) 16%, transparent);

    --p-priority-low:    var(--p-green-400);
    --p-priority-normal: var(--p-primary-400);
    --p-priority-high:   var(--p-amber-400);
    --p-priority-urgent: var(--p-red-400);
}