/* Oraculum frontend CSS — estratto da head.html in refactor 2026-05-13.
   Per modifiche, edita questo file: i partial Jinja includono via <link rel=stylesheet>. */

        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            /* === COLORI === */
            /* Phase 1 (2026-05-15): bridge legacy --navy al token --oc-primary
               navy istituzionale (oraculum-tokens.css). Valore identico
               (#0D1F3A), nessuno shift cromatico atteso. Il fallback hardcoded
               garantisce graceful degradation se tokens.css non carica.
               --blue resta hardcoded: non ha equivalente esatto nei tokens
               (accent blue distinto dal primary navy). */
            --navy: var(--oc-primary, #0D1F3A);
            --blue: #2E75B6;
            --light-blue: #E3F2FD;
            --bg: #F7F8FA;
            --white: #FFFFFF;
            --gray-100: #F5F5F5;
            --gray-200: #E0E0E0;
            --gray-400: #9E9E9E;
            --gray-600: #616161;
            --gray-800: #333333;
            --green: #2E7D32;
            --fesr-color: #2E7D32;
            --fse-color: #1565C0;
            /* sistema feedback */
            --warn-bg: #FEF3C7;
            --warn-bd: #F59E0B;
            --warn-fg: #78350F;
            --info-bg: #E3F2FD;
            --info-bd: #2E75B6;
            --info-fg: #1565C0;

            /* === SPACING (multipli di 4) === */
            --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
            --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
            --sp-12: 48px; --sp-16: 64px;

            /* === RAGGI === */
            --radius-sm: 4px;  --radius-md: 6px;
            --radius-lg: 8px;  --radius-xl: 12px;
            --radius-2xl: 14px; --radius-pill: 999px;

            /* === LAYOUT (stage centrale) === */
            --stage-min: 720px;
            --stage-max: 1100px;
            --stage-max-xl: 1280px; /* xl viewport >=1440 */
            --menu-width: 60px;
            --menu-gap: 22px;
            --menu-reserve: 96px; /* 14 (left) + 60 (pill) + 22 (gap) */
            --header-h: 60px;

            /* === Z-INDEX SCALE (evita conflitti) === */
            --z-base: 1;
            --z-stage: 10;
            --z-dropdown: 40;
            --z-drawer: 60;
            --z-menu: 65;
            --z-modal: 100;
            --z-toast: 200;

            /* === BREAKPOINTS (riferimento commento) ===
               sm:  <480     → mobile portrait
               md:  480–1099 → tablet, mobile landscape
               lg:  1100–1439 → desktop standard
               xl:  >=1440   → large desktop / 4K
               (CSS-side i breakpoint vivono nei @media — i token qui non
                sono usati direttamente perché media queries non leggono var) */

            /* === DURATIONS === */
            --dur-fast: 140ms;
            --dur-base: 200ms;
            --dur-slow: 320ms;
            --ease-default: cubic-bezier(.4, 1.2, .6, 1);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--gray-800);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }