/* ============================================================================
   ZcodedepthV — Design system condiviso (2026-10-08)

   UNICA fonte dei valori di base per TUTTA l'app: pannello admin, aree dei clienti,
   login. Ogni altro foglio di stile usa queste variabili, non valori scritti a mano.

   Direzione (decisa con il titolare): stile dei gestionali professionali.
   - Sfondo della pagina a TINTA UNITA, uguale ovunque: niente gradienti, righe,
     griglie, raggi o scene animate.
   - Menu laterale scuro blu notte (#0B0A20, lo stesso dell'icona dell'app).
   - Contenuti su card bianche con bordo sottile e ombra leggera.
   - Animazioni brevi e discrete; spente con prefers-reduced-motion.
   - Nei verticali il colore del settore resta come ACCENTO (pulsanti, selezioni),
     mai come sfondo: lo fornisce il tema MudBlazor del verticale (--mud-palette-primary).
   ============================================================================ */
:root {
    /* Superfici */
    --zd-canvas: #F3F5F9;          /* sfondo pagina, tinta unita */
    --zd-surface: #FFFFFF;         /* card, dialog, barra in alto */
    --zd-surface-2: #F8FAFC;       /* intestazioni tabelle, riquadri interni */
    --zd-surface-hover: #F1F5F9;
    --zd-border: #E2E8F0;
    --zd-border-strong: #CBD5E1;

    /* Testo */
    --zd-text: #0F172A;
    --zd-text-2: #475569;
    --zd-text-3: #64748B;
    --zd-text-inverse: #FFFFFF;

    /* Marchio (piattaforma e pannello admin) */
    --zd-brand: #4F46E5;
    --zd-brand-hover: #4338CA;
    --zd-brand-soft: #EEF2FF;      /* fondo di selezioni e chip del marchio */
    --zd-brand-ring: rgba(79, 70, 229, .28);
    --zd-brand-gradient: linear-gradient(135deg, #8B5CF6 0%, #22D3EE 100%); /* solo dettagli: logo, barretta attiva */

    /* Menu laterale */
    --zd-sidebar-bg: #0B0A20;
    --zd-sidebar-bg-2: #12112B;    /* gruppi aperti, hover */
    --zd-sidebar-border: rgba(255, 255, 255, .06);
    --zd-sidebar-text: #A9AEC9;
    --zd-sidebar-text-strong: #FFFFFF;
    --zd-sidebar-section: #6B7094; /* titoletti di sezione */
    --zd-sidebar-active-bg: rgba(139, 92, 246, .16);
    --zd-sidebar-width: 264px;

    /* Barra in alto */
    --zd-topbar-bg: #FFFFFF;
    --zd-topbar-height: 60px;

    /* Stati */
    --zd-success: #059669;  --zd-success-soft: #ECFDF5;
    --zd-warning: #D97706;  --zd-warning-soft: #FFFBEB;
    --zd-danger:  #DC2626;  --zd-danger-soft:  #FEF2F2;
    --zd-info:    #0284C7;  --zd-info-soft:    #F0F9FF;

    /* Forma */
    --zd-radius-sm: 8px;
    --zd-radius: 12px;
    --zd-radius-lg: 16px;
    --zd-radius-pill: 999px;

    /* Profondità */
    --zd-shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
    --zd-shadow-2: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -6px rgba(15, 23, 42, .10);
    --zd-shadow-3: 0 12px 32px -8px rgba(15, 23, 42, .18);   /* dialog, menu a comparsa */

    /* Spaziatura (scala 4) */
    --zd-space-1: 4px;  --zd-space-2: 8px;  --zd-space-3: 12px;
    --zd-space-4: 16px; --zd-space-5: 24px; --zd-space-6: 32px;

    /* Tipografia */
    --zd-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --zd-font-size: 14px;
    --zd-font-size-sm: 13px;
    --zd-h1: 22px;
    --zd-h2: 18px;

    /* Movimento */
    --zd-ease: cubic-bezier(.2, .8, .2, 1);
    --zd-dur-fast: 120ms;
    --zd-dur: 200ms;
    --zd-dur-slow: 280ms;
}

@media (prefers-reduced-motion: reduce) {
    :root { --zd-dur-fast: 0ms; --zd-dur: 0ms; --zd-dur-slow: 0ms; }
}