/* ═══════════════════════════════════════════════════════════
   LievoEngine — Design Tokens (tema lievo)
   Versione: 06-05-2026

   Tutte le variabili CSS del Visual G Lievo.
   Un solo punto di verità. Modifica qui per cambiare il tema.

   Convenzioni:
     --lv-c-*      colori
     --lv-s-*      spaziature (scala 4px)
     --lv-fs-*     font-size
     --lv-fw-*     font-weight
     --lv-lh-*     line-height
     --lv-z-*      z-index layers
     --lv-d-*      durations animazioni
     --lv-b-*      border / breakpoint
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ─── Colori brand ─────────────────────────────────── */
    --lv-c-bg: #F2EBE5;          /* crema chiara */
    --lv-c-fg: #18141A;          /* scuro testo */
    --lv-c-accent: #9D4EDD;      /* viola elettrico (light mode) */
    --lv-c-accent-soft: rgba(157, 78, 221, 0.12);
    --lv-c-accent-strong: #7B2CB8;

    /* ─── Stati semantici ──────────────────────────────── */
    --lv-c-success: #2D7A4F;
    --lv-c-success-bg: rgba(45, 122, 79, 0.10);
    --lv-c-warning: #B07A0E;
    --lv-c-warning-bg: rgba(176, 122, 14, 0.10);
    --lv-c-danger: #B8362A;
    --lv-c-danger-bg: rgba(184, 54, 42, 0.10);
    --lv-c-info: #2A6FB8;
    --lv-c-info-bg: rgba(42, 111, 184, 0.10);

    /* ─── Scale neutri (da fg) ─────────────────────────── */
    --lv-c-fg-strong: #18141A;
    --lv-c-fg-muted: rgba(24, 20, 26, 0.60);
    --lv-c-fg-faint: rgba(24, 20, 26, 0.40);
    --lv-c-fg-ghost: rgba(24, 20, 26, 0.18);

    /* ─── Superfici ────────────────────────────────────── */
    --lv-c-surface: #FFFFFF;
    --lv-c-surface-alt: #EDE5DD;
    --lv-c-overlay: rgba(24, 20, 26, 0.55);

    /* ─── Bordi ────────────────────────────────────────── */
    --lv-c-border: rgba(24, 20, 26, 0.18);
    --lv-c-border-strong: rgba(24, 20, 26, 0.32);

    /* ─── Typography ───────────────────────────────────── */
    --lv-ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --lv-ff-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --lv-ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --lv-fs-xs: 11px;
    --lv-fs-sm: 13px;
    --lv-fs-base: 15px;
    --lv-fs-md: 17px;
    --lv-fs-lg: 20px;
    --lv-fs-xl: 24px;
    --lv-fs-2xl: 32px;
    --lv-fs-3xl: 44px;

    --lv-fw-regular: 400;
    --lv-fw-medium: 500;
    --lv-fw-semibold: 600;
    --lv-fw-bold: 700;

    --lv-lh-tight: 1.2;
    --lv-lh-snug: 1.35;
    --lv-lh-base: 1.55;
    --lv-lh-loose: 1.75;

    /* ─── Spaziature (scala 4px) ───────────────────────── */
    --lv-s-0: 0;
    --lv-s-1: 4px;
    --lv-s-2: 8px;
    --lv-s-3: 12px;
    --lv-s-4: 16px;
    --lv-s-5: 20px;
    --lv-s-6: 24px;
    --lv-s-8: 32px;
    --lv-s-10: 40px;
    --lv-s-12: 48px;
    --lv-s-16: 64px;
    --lv-s-20: 80px;

    /* ─── Border radius (Lievo: SPIGOLI NETTI) ────────── */
    --lv-b-radius-0: 0;
    --lv-b-radius-1: 0;     /* anche elementi "rotondi" restano spigolosi */
    --lv-b-radius-pill: 999px;  /* eccezione per badge circolari/pillole */
    --lv-b-radius-full: 50%;     /* eccezione per avatar tondo */
    --lv-b-width: 1px;
    --lv-b-width-strong: 2px;

    /* ─── Z-index layers ───────────────────────────────── */
    --lv-z-base: 1;
    --lv-z-sticky: 100;
    --lv-z-dropdown: 500;
    --lv-z-overlay: 800;
    --lv-z-modal: 900;
    --lv-z-popover: 950;
    --lv-z-toast: 1000;

    /* ─── Animazioni (rispetta prefers-reduced-motion) ── */
    --lv-d-instant: 80ms;
    --lv-d-fast: 150ms;
    --lv-d-base: 220ms;
    --lv-d-slow: 320ms;
    --lv-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* ─── Focus ring (accessibilità) ───────────────────── */
    --lv-c-focus: var(--lv-c-accent);
    --lv-focus-ring: 0 0 0 2px var(--lv-c-bg), 0 0 0 4px var(--lv-c-focus);

    /* ─── Layout ───────────────────────────────────────── */
    --lv-container-sm: 640px;
    --lv-container-md: 800px;
    --lv-container-lg: 1024px;
    --lv-container-xl: 1280px;

    --lv-sidebar-w: 248px;
    --lv-topbar-h: 56px;
}

/* ═══════════════════════════════════════════════════════════
   Dark mode automatica (segue il sistema)
   Override SOLO i valori che cambiano in dark.
   ═══════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    :root {
        --lv-c-bg: #18141A;
        --lv-c-fg: #F2EBE5;
        --lv-c-accent: #B968F0;
        --lv-c-accent-soft: rgba(185, 104, 240, 0.16);
        --lv-c-accent-strong: #D094F5;

        --lv-c-success: #5FBD89;
        --lv-c-success-bg: rgba(95, 189, 137, 0.12);
        --lv-c-warning: #E1B45A;
        --lv-c-warning-bg: rgba(225, 180, 90, 0.12);
        --lv-c-danger: #E66E60;
        --lv-c-danger-bg: rgba(230, 110, 96, 0.12);
        --lv-c-info: #6FA9E2;
        --lv-c-info-bg: rgba(111, 169, 226, 0.12);

        --lv-c-fg-strong: #F2EBE5;
        --lv-c-fg-muted: rgba(242, 235, 229, 0.65);
        --lv-c-fg-faint: rgba(242, 235, 229, 0.40);
        --lv-c-fg-ghost: rgba(242, 235, 229, 0.18);

        --lv-c-surface: #221C26;
        --lv-c-surface-alt: #2A2331;
        --lv-c-overlay: rgba(0, 0, 0, 0.65);

        --lv-c-border: rgba(242, 235, 229, 0.18);
        --lv-c-border-strong: rgba(242, 235, 229, 0.32);

        --lv-focus-ring: 0 0 0 2px var(--lv-c-bg), 0 0 0 4px var(--lv-c-focus);
    }
}

/* ═══════════════════════════════════════════════════════════
   Override manuale tramite [data-theme="dark"] o ="light".
   Utile per toggle utente che sovrascrive il setting di sistema.
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --lv-c-bg: #F2EBE5;
    --lv-c-fg: #18141A;
    --lv-c-accent: #9D4EDD;
    --lv-c-accent-soft: rgba(157, 78, 221, 0.12);
    --lv-c-fg-strong: #18141A;
    --lv-c-fg-muted: rgba(24, 20, 26, 0.60);
    --lv-c-fg-faint: rgba(24, 20, 26, 0.40);
    --lv-c-fg-ghost: rgba(24, 20, 26, 0.18);
    --lv-c-surface: #FFFFFF;
    --lv-c-surface-alt: #EDE5DD;
    --lv-c-border: rgba(24, 20, 26, 0.18);
    --lv-c-border-strong: rgba(24, 20, 26, 0.32);
}

[data-theme="dark"] {
    --lv-c-bg: #18141A;
    --lv-c-fg: #F2EBE5;
    --lv-c-accent: #B968F0;
    --lv-c-accent-soft: rgba(185, 104, 240, 0.16);
    --lv-c-fg-strong: #F2EBE5;
    --lv-c-fg-muted: rgba(242, 235, 229, 0.65);
    --lv-c-fg-faint: rgba(242, 235, 229, 0.40);
    --lv-c-fg-ghost: rgba(242, 235, 229, 0.18);
    --lv-c-surface: #221C26;
    --lv-c-surface-alt: #2A2331;
    --lv-c-border: rgba(242, 235, 229, 0.18);
    --lv-c-border-strong: rgba(242, 235, 229, 0.32);
}

/* ═══════════════════════════════════════════════════════════
   Reduced motion (accessibilità)
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --lv-d-instant: 0ms;
        --lv-d-fast: 0ms;
        --lv-d-base: 0ms;
        --lv-d-slow: 0ms;
    }
}