/* ==========================================================================
   PrintManager Design System — TOKEN SEMANTICI
   --------------------------------------------------------------------------
   Questo e' l'UNICO file del progetto autorizzato a contenere colori letterali.
   Ovunque altro si usa esclusivamente var(--app-*).

   Accento: blu, derivato dal precedente #0d6efd (default Bootstrap mai scelto)
   e ritarato per essere leggibile anche in dark e meno saturo in light.

   Nomenclatura allineata a SARTUP V2 di proposito: i valori sono nostri, il
   vocabolario e' condiviso, cosi' un componente resta portabile fra i progetti.
   ========================================================================== */

:root,
[data-theme="light"] {
    /* --- Superfici --------------------------------------------------- */
    --app-bg:                  #eef1f5;
    --app-bg-soft:             #f7f9fc;
    --app-surface:             #ffffff;
    --app-surface-2:           #f7f9fc;
    --app-surface-section:     #f4f7fa;
    --app-surface-inset:       #ffffff;
    --app-surface-input:       #f8fafc;
    --app-surface-modal:       #ffffff;
    --app-surface-modal-head:  #f4f7fa;

    /* --- Testo -------------------------------------------------------- */
    --app-text:                #16202e;
    --app-text-secondary:      #4a5768;
    --app-text-muted:          #6b7889;

    /* --- Bordi -------------------------------------------------------- */
    --app-border:              #d9e0e8;
    --app-border-strong:       #c3cdd9;
    --app-border-selected:     #1a63c7;

    /* --- Stati -------------------------------------------------------- */
    --app-hover-bg:            #f2f6fb;
    --app-selected-bg:         #e6eefa;
    --app-focus-color:         #1a63c7;
    --app-success:             #1f8a53;
    --app-warning:             #b8730c;
    --app-danger:              #cc3546;
    --app-info:                #1a63c7;

    /* --- Accenti (selezione / evidenziazione, MAI azioni) ------------- */
    --app-accent:              #1a63c7;
    --app-accent-strong:       #14498f;

    /* --- Azioni (pulsanti primari, MAI selezione) --------------------- */
    --app-action-primary:        #1a63c7;
    --app-action-primary-strong: #14498f;
    --app-action-primary-hover:  #1755aa;
    --app-action-primary-text:   #ffffff;

    /* --- Ombre e focus ------------------------------------------------ */
    --app-shadow-tint:         #122238;   /* tinta base delle ombre */
    --app-shadow:              0 18px 48px rgba(18, 34, 56, 0.10);
    --app-shadow-soft:         0 2px 8px rgba(18, 34, 56, 0.06);
    --app-focus-ring:          0 0 0 3px rgba(26, 99, 199, 0.18);

    /* --- Superfici invertite (tooltip) -------------------------------- */
    --app-tooltip-bg:          #1e293b;
    --app-tooltip-text:        #f8fafc;
    --app-tooltip-border:      #3c4a5e;

    /* Testo scuro su fondi chiari colorati (warning/amber): resta scuro in
       entrambi i temi, perche' l'ambra e' chiara in entrambi. */
    --app-on-warning:          #111827;

    /* --- Scrollbar ---------------------------------------------------- */
    --app-scrollbar-track:       #eef1f5;
    --app-scrollbar-thumb:       #b4c0cf;
    --app-scrollbar-thumb-hover: #93a2b5;

    /* --- Testo su fondo accento (overlay dei gradienti) --------------- */
    --app-on-accent:           #ffffff;

    color-scheme: light;
}

[data-theme="dark"] {
    /* --- Superfici --------------------------------------------------- */
    --app-bg:                  #0f1620;
    --app-bg-soft:             #172130;
    --app-surface:             #141d29;
    --app-surface-2:           #111925;
    --app-surface-section:     #131c27;
    --app-surface-inset:       #18232f;
    --app-surface-input:       #101a26;
    --app-surface-modal:       #1a2533;
    --app-surface-modal-head:  #16202c;

    /* --- Testo -------------------------------------------------------- */
    --app-text:                #e8eef7;
    --app-text-secondary:      #a9b8cc;
    --app-text-muted:          #8d9db3;

    /* --- Bordi -------------------------------------------------------- */
    --app-border:              #27354a;
    --app-border-strong:       #3a4c66;
    --app-border-selected:     #5fa3f5;

    /* --- Stati -------------------------------------------------------- */
    --app-hover-bg:            #1a2533;
    --app-selected-bg:         #17304d;
    --app-focus-color:         #5fa3f5;
    --app-success:             #45bd82;
    --app-warning:             #e0a84a;
    --app-danger:              #e8697c;
    --app-info:                #6ea8ff;

    /* --- Accenti ------------------------------------------------------ */
    --app-accent:              #5fa3f5;
    --app-accent-strong:       #8fc0fa;

    /* --- Azioni ------------------------------------------------------- */
    --app-action-primary:        #2f6fd0;
    --app-action-primary-strong: #4a89e8;
    --app-action-primary-hover:  #3a7ade;
    --app-action-primary-text:   #ffffff;

    /* --- Ombre e focus ------------------------------------------------ */
    --app-shadow-tint:         #000000;
    --app-shadow:              0 18px 48px rgba(0, 0, 0, 0.45);
    --app-shadow-soft:         0 2px 8px rgba(0, 0, 0, 0.30);
    --app-focus-ring:          0 0 0 3px rgba(95, 163, 245, 0.28);

    /* --- Superfici invertite (tooltip) -------------------------------- */
    --app-tooltip-bg:          #2b3a4d;
    --app-tooltip-text:        #f1f6fc;
    --app-tooltip-border:      #46586e;
    --app-on-warning:          #111827;

    /* --- Scrollbar ---------------------------------------------------- */
    --app-scrollbar-track:       #131c27;
    --app-scrollbar-thumb:       #3a4c66;
    --app-scrollbar-thumb-hover: #4d6382;

    /* --- Testo su fondo accento --------------------------------------- */
    --app-on-accent:           #ffffff;

    color-scheme: dark;
}

/* ==========================================================================
   COLORI CATEGORICI
   Servono a distinguere categorie (ruoli, stati non semantici), non a
   comunicare successo/errore. Non usarli al posto dei token di stato.
   ========================================================================== */

:root,
[data-theme="light"] {
    --app-cat-purple: #6f42c1;
    --app-cat-teal:   #12917a;
    --app-cat-slate:  #6b7889;
    --app-cat-orange: #ea6a12;
    --app-cat-magenta: #c2005f;
}

[data-theme="dark"] {
    --app-cat-purple: #a98ae0;
    --app-cat-teal:   #45c3a9;
    --app-cat-slate:  #8d9db3;
    --app-cat-orange: #f2924e;
    --app-cat-magenta: #e876ab;
}

/* ==========================================================================
   COSTANTI DI DENSITA' E FORMA
   Non dipendono dal tema. Cambiarle qui ricalibra tutta l'applicazione.
   I valori partono dagli attuali: la stretta a 26/28px va introdotta in F2,
   dopo validazione visiva su una pagina pilota (decisione D6).
   ========================================================================== */

:root {
    --radius-control: 8px;
    --radius-panel:   14px;
    --radius-pill:    999px;

    --height-control:         32px;  /* target SARTUP: 26px */
    --height-control-primary: 34px;  /* target SARTUP: 28px */
    --height-row:             38px;  /* target SARTUP: 28px */

    --font-size-ui:    13px;         /* target SARTUP: 11px */
    --font-size-title: 15px;

    --topbar-height:    56px;
    --statusbar-height: 34px;
    --sidebar-width:    18rem;

    /* Altezza utile della vista fra topbar e status bar, al netto del padding di
       main (1rem sopra, 0.5rem sotto): per le pagine che devono riempirla */
    --pm-vista-altezza: calc(100dvh - var(--topbar-height) - var(--statusbar-height) - 1.5rem);
}

/* ==========================================================================
   PONTE DI COMPATIBILITA'
   --------------------------------------------------------------------------
   admin.css definisce ancora --primary-blue / --gray-* e li usa in 34 punti.
   Qui li ridefiniamo in termini di token, cosi' quei 34 punti diventano
   tematici senza toccarli. I ~116 colori LETTERALI rimasti in admin.css
   restano da convertire a mano: sono il lavoro vero della Fase 1.

   Questo blocco e' TRANSITORIO: si elimina quando admin.css e' bonificato.
   ========================================================================== */

:root {
    --primary-blue:       var(--app-accent);
    --primary-blue-light: var(--app-accent-strong);
    --primary-blue-dark:  var(--app-accent-strong);
    --success-green:      var(--app-success);
    --info-cyan:          var(--app-info);
    --danger-red:         var(--app-danger);
    --warning-orange:     var(--app-warning);

    --gray-50:  var(--app-bg-soft);
    --gray-100: var(--app-surface-2);
    --gray-200: var(--app-border);
    --gray-300: var(--app-border-strong);
    --gray-400: var(--app-text-muted);
    --gray-500: var(--app-text-muted);
    --gray-600: var(--app-text-secondary);
    --gray-700: var(--app-text-secondary);
    --gray-800: var(--app-text);
    --gray-900: var(--app-text);
}

/* ==========================================================================
   Landing pubblica (resources/views/landing.blade.php)
   --------------------------------------------------------------------------
   Palette della pagina di presentazione: scura di base, chiara con
   data-theme="light" (stesso interruttore e stessa chiave pm-theme dell'app).
   Vive qui per
   la regola del design system (colori letterali solo in questo file); la
   scena WebGL di public/js/pm-landing-hero.js legge questi stessi valori con
   getComputedStyle, quindi un colore si cambia in un punto solo.
   ========================================================================== */
.pm-landing {
    --lp-bg:            #050b1a;
    --lp-bg-2:          #081229;
    --lp-panel:         #0a1630;
    --lp-panel-2:       #0d1c3c;
    --lp-line:          #1b2d55;
    --lp-line-strong:   #2a4380;
    --lp-text:          #eef3ff;
    --lp-text-2:        #b9c6e4;
    --lp-text-3:        #7f8fb5;
    --lp-accent:        #4f8dff;
    --lp-accent-2:      #8fbaff;
    --lp-accent-deep:   #1d4fd8;
    --lp-glow:          #3d7bff;
    --lp-light:         #ffffff;   /* testo sui pulsanti blu */

    /* scena 3D: facce dei caratteri, fianchi, griglia, nebbia */
    --lp-3d-face:       #e9f1ff;
    --lp-3d-side:       #1b4fd6;
    --lp-3d-edge:       #5d9bff;
    --lp-3d-grid:       #1d3d86;
    --lp-3d-fog:        #050b1a;
}

[data-theme="light"] .pm-landing {
    --lp-bg:            #eef3fb;
    --lp-bg-2:          #f8fbff;
    --lp-panel:         #ffffff;
    --lp-panel-2:       #f1f5fc;
    --lp-line:          #d7e1f1;
    --lp-line-strong:   #b6c6e2;
    --lp-text:          #0b1530;
    --lp-text-2:        #3c4a68;
    --lp-text-3:        #67758f;
    --lp-accent:        #2160e0;
    --lp-accent-2:      #1d55d0;
    --lp-accent-deep:   #1d4fd8;
    --lp-glow:          #7da6ff;
    --lp-light:         #ffffff;

    --lp-3d-face:       #2a62e0;   /* in chiaro le facce sono blu pieno: il bianco sparirebbe */
    --lp-3d-side:       #0e2266;
    --lp-3d-edge:       #2f6ae8;
    --lp-3d-grid:       #b9cbec;
    --lp-3d-fog:        #f3f7fd;
}