/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDATION — NON MODIFICARE
   Fa parte di uicore/core: al prossimo riallineamento questo file viene
   sovrascritto e ogni modifica va persa. Per personalizzare: config/brand.css
   oppure un foglio di progetto caricato DOPO il core.
   ═══════════════════════════════════════════════════════════════════════════

   Scala del sistema: tipografia, spazi, raggi, ombre, movimento, livelli.
   Sono i valori che rendono coerente il prodotto — se ogni pagina inventa il
   suo padding, il risultato sembra assemblato da persone diverse.

   I colori NON stanno qui: stanno in config/brand.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Tipografia ────────────────────────────────────────────────────────
       Due famiglie con ruoli distinti: una per i titoli, una per il testo.
       È ciò che dà carattere senza dover decorare. */
    --ui-font-display: 'Nunito', system-ui, -apple-system, sans-serif;
    --ui-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --ui-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* Scala tipografica. I salti sono percepibili: due misure troppo vicine
       non creano gerarchia, creano solo l'impressione di un errore. */
    --ui-text-2xs: 0.68rem;
    --ui-text-xs: 0.75rem;
    --ui-text-sm: 0.82rem;
    --ui-text-md: 0.94rem;
    --ui-text-lg: 1.06rem;
    --ui-text-xl: 1.35rem;
    --ui-text-2xl: 1.75rem;
    --ui-text-3xl: 2.2rem;

    --ui-weight-normal: 400;
    --ui-weight-medium: 500;
    --ui-weight-semibold: 600;
    --ui-weight-bold: 700;
    --ui-weight-black: 800;

    /* I titoli hanno interlinea stretta e tracking negativo: è quello che
       li fa sembrare "disegnati" invece che semplicemente ingranditi. */
    --ui-leading-tight: 1.15;
    --ui-leading-normal: 1.5;
    --ui-leading-loose: 1.7;
    --ui-tracking-tight: -0.02em;
    --ui-tracking-wide: 0.06em;

    /* ── Spazi ─────────────────────────────────────────────────────────────
       Scala a passi di 4px. Usare sempre questi valori, mai numeri liberi. */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;
    --ui-space-16: 64px;

    /* ── Raggi ─────────────────────────────────────────────────────────────
       Raggi generosi e coerenti sono metà dell'effetto "premium". Il valore
       cresce con la dimensione dell'elemento: un raggio da card su un badge
       lo fa sembrare sformato. */
    --ui-radius-xs: 8px;
    --ui-radius-sm: 12px;
    --ui-radius-md: 16px;
    --ui-radius-lg: 20px;
    --ui-radius-xl: 26px;
    --ui-radius-pill: 999px;

    /* ── Ombre ─────────────────────────────────────────────────────────────
       Diffuse e poco opache: l'ombra deve suggerire profondità, non
       disegnare un contorno. Quelle dure fanno sembrare tutto ritagliato. */
    --ui-shadow-xs: 0 1px 2px rgba(20, 18, 40, .06);
    --ui-shadow-sm: 0 2px 8px rgba(20, 18, 40, .07);
    --ui-shadow-md: 0 10px 30px rgba(40, 25, 90, .10), 0 2px 6px rgba(40, 25, 90, .05);
    --ui-shadow-lg: 0 14px 40px rgba(40, 25, 90, .14), 0 3px 10px rgba(40, 25, 90, .06);
    --ui-shadow-xl: 0 28px 60px rgba(20, 18, 40, .20);
    /* Luce interna sul bordo alto: fa "alzare" le superfici chiare. */
    --ui-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .6);

    /* ── Movimento ─────────────────────────────────────────────────────────
       Tre durate, non una per componente. `spring` per ciò che l'utente
       trascina o apre, `ease` per tutto il resto. */
    --ui-duration-fast: 160ms;
    --ui-duration-base: 220ms;
    --ui-duration-slow: 320ms;
    --ui-ease: cubic-bezier(.2, .8, .2, 1);
    --ui-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    /* Per sheet e pannelli trascinabili: decelerazione lunga, stile iOS. */
    --ui-ease-sheet: cubic-bezier(.32, .72, 0, 1);

    /* ── Controlli ─────────────────────────────────────────────────────────
       44px è il minimo per un bersaglio tattile comodo. Sotto, su un
       telefono si sbaglia il tocco — e non è una questione estetica. */
    --ui-control-height: 42px;
    --ui-control-height-sm: 34px;
    --ui-touch-target: 44px;

    /* ── Livelli ───────────────────────────────────────────────────────────
       Dichiarati qui una volta sola. Gli z-index inventati sul posto sono
       la causa numero uno dei "il modal sta sotto la sidebar". */
    --ui-z-base: 1;
    --ui-z-sticky: 20;
    --ui-z-shell: 30;
    --ui-z-backdrop: 40;
    --ui-z-sheet: 50;
    --ui-z-modal: 60;
    --ui-z-toast: 70;
    --ui-z-loader: 80;

    /* ── Layout ────────────────────────────────────────────────────────────
       Il breakpoint sotto cui scattano le modalità mobile di tabelle e
       dashboard. Allineato al `lg` di Bootstrap. */
    --ui-sidebar-width: 248px;
    --ui-topbar-height: 64px;
    --ui-bottomnav-height: 62px;
    --ui-content-max: 1440px;
}

[data-bs-theme="dark"] {
    /* Sul fondo scuro l'ombra nera non si vede: va più profonda e più opaca,
       e la luce interna sul bordo si attenua o sembra un alone. */
    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
    --ui-shadow-md: 0 10px 30px rgba(0, 0, 0, .5);
    --ui-shadow-lg: 0 14px 40px rgba(0, 0, 0, .55);
    --ui-shadow-xl: 0 28px 60px rgba(0, 0, 0, .6);
    --ui-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Chi ha chiesto meno movimento riceve meno movimento. Non è un dettaglio di
   cortesia: per alcune persone le animazioni causano nausea reale. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ui-duration-fast: 0ms;
        --ui-duration-base: 0ms;
        --ui-duration-slow: 0ms;
    }
}