/* =========================================================================
   Auxilium Design Tokens
   Sistema di token per la UI di Auxilium Engineering.
   - Light theme = default (appropriato per software tecnico professionale)
   - Dark theme  = opt-in via [data-theme="dark"] sul root o shell
   ========================================================================= */

:root {

    /* =====================================================================
       TIPOGRAFIA
       Inter   = UI, ottima leggibilità con caratteri accentati italiani
       JetBrains Mono = numeri, formule, codici normativi
       I font vengono caricati in _Host.cshtml / App.razor tramite Google Fonts.
       ===================================================================== */
    --ax-font-sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --ax-font-mono: "Cascadia Code", Consolas, "Courier New", monospace;

    /* Scala tipografica (px) - limitata a valori necessari in UI tecnica */
    --ax-fs-11: 11px;
    --ax-fs-12: 12px;
    --ax-fs-13: 13px;
    --ax-fs-14: 14px;
    --ax-fs-16: 16px;
    --ax-fs-18: 18px;
    --ax-fs-20: 20px;
    --ax-fs-24: 24px;
    --ax-fs-32: 32px;
    --ax-fs-40: 40px;

    /* =====================================================================
       BREAKPOINTS
       ===================================================================== */
    --ax-break-mobile: 767px;
    --ax-break-tablet: 1024px;
    --ax-break-desktop: 1280px;

    /* =====================================================================
       SPAZIATURE (step 4px)
       ===================================================================== */
    --ax-space-1: 4px;
    --ax-space-2: 8px;
    --ax-space-3: 12px;
    --ax-space-4: 16px;
    --ax-space-5: 20px;
    --ax-space-6: 24px;
    --ax-space-7: 32px;
    --ax-space-8: 40px;
    --ax-space-9: 48px;
    --ax-space-10: 64px;

    /* =====================================================================
       RAGGI - ridotti rispetto alla versione precedente per un look tecnico
       ===================================================================== */
    --ax-radius-xs: 4px;
    --ax-radius-sm: 6px;
    --ax-radius-md: 8px;
    --ax-radius-lg: 12px;
    --ax-radius-xl: 16px;
    --ax-radius-pill: 999px;

    /* Padding e altezza dei pulsanti: regola unica per .ax-btn e .studio-button,
       così si cambiano da un posto solo (niente valori hardcodati per bottone). */
    --ax-btn-padding-y: 10px;
    --ax-btn-padding-x: 18px;
    --ax-btn-min-height: 40px;

    /* =====================================================================
       DIMENSIONI LAYOUT
       ===================================================================== */
    --ax-page-max: 1600px;
    --ax-page-padding: 24px;
    --ax-layout-gap: 18px;
    --ax-topbar-height: 64px;
    --ax-sidebar-width: 260px;
    --ax-sidebar-collapsed-width: 72px;
    --ax-study-card-min: 320px;
    --ax-study-card-max: 420px;

    /* =====================================================================
       PALETTE BRAND - Deep Engineering Blue
       ===================================================================== */
    --ax-primary-900: #062661;
    --ax-primary-800: #0a3378;
    --ax-primary-700: #0b3d91; /* colore brand principale */
    --ax-primary-600: #1e4bb3;
    --ax-primary-500: #3560c7;
    --ax-primary-400: #6b89d9;
    --ax-primary-300: #a9bceb;
    --ax-primary-200: #cdd9f3;
    --ax-primary-100: #e6edfa;
    --ax-primary-50:  #f2f6fd;

    /* =====================================================================
       PALETTE ACCENT - Ambra Tecnica (azioni critiche, export, evidenze)
       ===================================================================== */
    --ax-accent-900: #78350f;
    --ax-accent-800: #92400e;
    --ax-accent-700: #b45309;
    --ax-accent-600: #d97706;
    --ax-accent-500: #f59e0b;
    --ax-accent-400: #fbbf24;
    --ax-accent-300: #fcd34d;
    --ax-accent-200: #fde68a;
    --ax-accent-100: #fef3e2;

    /* Alias storico (retro-compatibilità con Home.razor.css) */
    --ax-accent: var(--ax-primary-700);
    --ax-accent-strong: var(--ax-primary-800);
    --ax-accent-soft: var(--ax-primary-100);

    /* =====================================================================
       HIGHLIGHT - terzo colore "warm" per richiami discreti
       Da usare con parsimonia su tag, badge, etichette di sezione,
       sottotitoli evocativi e numerini dei passi attivi del wizard.
       Non usarlo sui CTA principali: il primary deve restare il colore
       di azione, l'highlight serve a "guidare l'occhio" sull'informazione
       senza competere con i pulsanti. (vedi NavMenu indicatore voce attiva).
       ===================================================================== */
    --ax-highlight:        var(--ax-accent-600); /* arancio scuro tecnico */
    --ax-highlight-strong: var(--ax-accent-700);
    --ax-highlight-soft:   var(--ax-accent-100);
    --ax-highlight-on:     #ffffff;

    /* =====================================================================
       SCALA GRIGI NEUTRI
       ===================================================================== */
    --ax-gray-0:   #ffffff;
    --ax-gray-25:  #fafbfc;
    --ax-gray-50:  #f7f8fa;
    --ax-gray-100: #f1f3f6;
    --ax-gray-200: #e5e9ef;
    --ax-gray-300: #cdd4de;
    --ax-gray-400: #a8b1bf;
    --ax-gray-500: #6b7789;
    --ax-gray-600: #4c5567;
    --ax-gray-700: #3b475a;
    --ax-gray-800: #242b38;
    --ax-gray-900: #0f1a2b;

    /* =====================================================================
       TEMA CHIARO (default) - semantic tokens
       ===================================================================== */
    --ax-body-bg: var(--ax-gray-50);
    --ax-shell-bg: var(--ax-gray-0);
    --ax-hero-bg: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    --ax-panel-bg: var(--ax-gray-0);
    --ax-panel-bg-soft: var(--ax-gray-25);
    --ax-card-bg: var(--ax-gray-0);
    --ax-card-bg-soft: var(--ax-gray-25);
    --ax-sidebar-bg: var(--ax-primary-900);
    --ax-sidebar-text: #c5cfe3;
    --ax-sidebar-text-strong: #ffffff;
    --ax-sidebar-border: rgba(255, 255, 255, 0.08);
    --ax-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --ax-sidebar-active-bg: rgba(255, 255, 255, 0.10);
    --ax-sidebar-active-indicator: var(--ax-accent-500);

    --ax-text-1: var(--ax-gray-900);
    --ax-text-2: var(--ax-gray-700);
    --ax-text-3: var(--ax-gray-500);
    --ax-text-4: var(--ax-gray-400);
    --ax-text-on-primary: #ffffff;
    --ax-text-on-accent:  #ffffff;

    --ax-border-soft:   var(--ax-gray-200);
    --ax-border-strong: var(--ax-gray-300);
    --ax-border-focus:  var(--ax-primary-500);

    /* Superfici input/paper */
    --ax-paper-bg: var(--ax-gray-0);
    --ax-paper-bg-2: var(--ax-gray-25);
    --ax-paper-text: var(--ax-gray-900);
    --ax-paper-text-soft: var(--ax-gray-600);
    --ax-paper-border: var(--ax-gray-200);
    --ax-input-bg: var(--ax-gray-0);
    --ax-input-bg-disabled: var(--ax-gray-100);
    --ax-input-text: var(--ax-gray-900);
    --ax-input-border: var(--ax-gray-300);
    --ax-input-border-focus: var(--ax-primary-500);

    /* =====================================================================
       TOKEN SEMANTICI - stati di conformità normativa
       Essenziali per il workflow normativo (antincendio, HVAC, acustica, ecc.)
       ===================================================================== */
    --ax-success: #047857;
    --ax-success-strong: #065f46;
    --ax-success-bg: #ecfdf5;
    --ax-success-border: #a7f3d0;

    --ax-warning: #b45309;
    --ax-warning-strong: #92400e;
    --ax-warning-bg: #fffbeb;
    --ax-warning-border: #fde68a;

    --ax-danger: #b91c1c;
    --ax-danger-strong: #991b1b;
    --ax-danger-bg: #fef2f2;
    --ax-danger-border: #fecaca;

    --ax-info: #1e40af;
    --ax-info-strong: #1e3a8a;
    --ax-info-bg: #eff6ff;
    --ax-info-border: #bfdbfe;

    /* =====================================================================
       STATI WORKFLOW (step del wizard normativo)
       ===================================================================== */
    --ax-step-completed-bg: var(--ax-success);
    --ax-step-completed-fg: #ffffff;
    --ax-step-active-bg: var(--ax-primary-700);
    --ax-step-active-fg: #ffffff;
    --ax-step-active-ring: var(--ax-primary-100);
    --ax-step-pending-bg: var(--ax-gray-0);
    --ax-step-pending-fg: var(--ax-gray-500);
    --ax-step-pending-border: var(--ax-gray-300);
    --ax-step-connector: var(--ax-gray-300);
    --ax-step-connector-completed: var(--ax-success);

    /* =====================================================================
       OMBRE - sottili, da software tecnico-strumentale
       ===================================================================== */
    --ax-shadow-1: 0 1px 2px rgba(15, 26, 43, 0.06);
    --ax-shadow-2: 0 4px 12px rgba(15, 26, 43, 0.08);
    --ax-shadow-3: 0 12px 32px rgba(15, 26, 43, 0.12);
    --ax-shadow-focus: 0 0 0 3px var(--ax-primary-100);

    /* Alias storici (per non rompere Home.razor.css) */
    --ax-shadow-soft: var(--ax-shadow-2);
    --ax-shadow-panel: var(--ax-shadow-2);
}

/* =========================================================================
   TEMA SCURO - opt-in
   Supporta sia [data-theme="dark"] sia una classe .theme-dark su qualunque
   antenato (es. <div class="app-shell theme-dark"> nella MainLayout).
   I token semantici sopra vengono sovrascritti; la struttura rimane la stessa.
   ========================================================================= */
[data-theme="dark"],
.theme-dark {
    --ax-body-bg: #0f141b;
    --ax-shell-bg: #171d26;
    --ax-hero-bg: linear-gradient(180deg, #171d26 0%, #1a2230 100%);
    --ax-panel-bg: #171d26;
    --ax-panel-bg-soft: #1d242f;
    --ax-card-bg: #1d242f;
    --ax-card-bg-soft: #232c39;
    --ax-sidebar-bg: #0b1119;
    --ax-sidebar-text: #99a5bc;
    --ax-sidebar-text-strong: #ffffff;
    --ax-sidebar-border: rgba(255, 255, 255, 0.06);
    --ax-sidebar-hover-bg: rgba(255, 255, 255, 0.04);
    --ax-sidebar-active-bg: rgba(255, 255, 255, 0.08);

    --ax-text-1: #f4f7fb;
    --ax-text-2: #c4cdda;
    --ax-text-3: #8a95a8;
    --ax-text-4: #6a7587;

    --ax-border-soft: rgba(255, 255, 255, 0.08);
    --ax-border-strong: rgba(255, 255, 255, 0.14);

    --ax-paper-bg: #1d242f;
    --ax-paper-bg-2: #232c39;
    --ax-paper-text: #f4f7fb;
    --ax-paper-text-soft: #c4cdda;
    --ax-paper-border: rgba(255, 255, 255, 0.12);
    --ax-input-bg: #171d26;
    --ax-input-bg-disabled: #242b38;
    --ax-input-text: #f4f7fb;
    --ax-input-border: rgba(255, 255, 255, 0.16);

    --ax-success-bg:     rgba(4, 120, 87, 0.15);
    --ax-success-border: rgba(167, 243, 208, 0.30);
    --ax-success-strong: #6ee7b7;   /* emerald-300: leggibile su sfondo scuro */

    --ax-warning-bg:     rgba(180, 83, 9, 0.15);
    --ax-warning-border: rgba(253, 230, 138, 0.30);
    --ax-warning-strong: #fde68a;   /* amber-200: leggibile su sfondo scuro */

    --ax-danger-bg:      rgba(185, 28, 28, 0.15);
    --ax-danger-border:  rgba(254, 202, 202, 0.30);
    --ax-danger-strong:  #fca5a5;   /* red-300: leggibile su sfondo scuro */

    --ax-info-bg:        rgba(30, 64, 175, 0.15);
    --ax-info-border:    rgba(191, 219, 254, 0.30);
    --ax-info-strong:    #93c5fd;   /* blue-300: leggibile su sfondo scuro */

    --ax-step-pending-bg: #1d242f;
    --ax-step-pending-fg: #8a95a8;
    --ax-step-pending-border: rgba(255, 255, 255, 0.16);
    --ax-step-connector: rgba(255, 255, 255, 0.16);
    --ax-step-active-ring: rgba(30, 75, 179, 0.35);

    --ax-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
    --ax-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.30);
    --ax-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.40);
    --ax-shadow-focus: 0 0 0 3px rgba(53, 96, 199, 0.35);
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--ax-font-sans);
    font-size: var(--ax-fs-14);
    line-height: 1.5;
    background: var(--ax-body-bg);
    color: var(--ax-text-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

code,
kbd,
pre,
samp,
.ax-mono {
    font-family: var(--ax-font-mono);
}

/* Tabular numbers per valori tecnici (portate, temperature, potenze) */
.ax-tnum {
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   RESPONSIVE PADDING
   ========================================================================= */
@media (max-width: 767px) {
    :root {
        --ax-page-padding: 14px;
        --ax-layout-gap: 14px;
        --ax-study-card-min: 100%;
        --ax-study-card-max: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --ax-page-padding: 18px;
        --ax-layout-gap: 16px;
    }
}

@media (min-width: 1200px) {
    :root {
        --ax-page-padding: 24px;
        --ax-layout-gap: 18px;
    }
}