/* NITRO-VDS DESIGN TOKENS
 * Focus: Performance (Zero Layout Shift), Aesthetic (Monterey Style),
 * Accessibility (contrast-safe text scale across light/dark themes)
 */

:root {
    /* --- Fondamentali --- */
    --vds-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --vds-curve: cubic-bezier(0.4, 0, 0.2, 1);
    --vds-speed-fast: 200ms;
    --vds-speed-medium: 400ms;

    /* --- Spaziature e Raggi --- */
    --vds-gap-s: 8px;
    --vds-gap-m: 16px;
    --vds-gap-l: 32px;
    --vds-radius-s: 8px;
    --vds-radius-m: 18px;
    --vds-radius-l: 28px;

    /* --- Shadow DOM Depth (Effetti Elevazione) --- */
    --vds-blur: saturate(180%) blur(20px);

    /* --- Fallback iniziali --- */
    --vds-bg: #f5f5f7;
    --vds-surface: rgba(255, 255, 255, 0.88);
    --vds-card-bg: #ffffff;
    --vds-text: #1d1d1f;
    --vds-text-dim: #6b7280;
    --vds-text-soft: #374151;
    --vds-text-strong: #0f172a;
    --vds-accent: #0071e3;
    --vds-border: rgba(0, 0, 0, 0.1);

    /* --- Utility Glass / UI --- */
    --vds-glass-bg: rgba(255, 255, 255, 0.78);
    --vds-glass-border: rgba(0, 0, 0, 0.12);
    --vds-icon-bg: #0f172a;
    --vds-icon-fg: #ffffff;

    /* --- Stati / Focus --- */
    --vds-focus-ring: #0a84ff;
    --vds-focus-ring-contrast: #ffffff;
}

/* --- TEMA LIGHT (Default) --- */
:root,
[data-theme="light"] {
    --vds-bg: #f5f5f7;
    --vds-surface: rgba(255, 255, 255, 0.88);
    --vds-card-bg: #ffffff;

    --vds-text: #1d1d1f;
    --vds-text-dim: #6b7280;
    --vds-text-soft: #374151;
    --vds-text-strong: #0f172a;

    --vds-accent: #0071e3;
    --vds-border: rgba(0, 0, 0, 0.1);

    --vds-glass-bg: rgba(255, 255, 255, 0.78);
    --vds-glass-border: rgba(0, 0, 0, 0.12);
    --vds-icon-bg: #0f172a;
    --vds-icon-fg: #ffffff;

    --vds-focus-ring: #0a84ff;
    --vds-focus-ring-contrast: #111827;
}

/* --- TEMA DARK AUTOMATICO --- */
@media (prefers-color-scheme: dark) {
    :root {
        --vds-bg: #000000;
        --vds-surface: rgba(29, 29, 31, 0.85);
        --vds-card-bg: #1d1d1f;

        --vds-text: #f5f5f7;
        --vds-text-dim: #d1d5db;
        --vds-text-soft: #e5e7eb;
        --vds-text-strong: #ffffff;

        --vds-accent: #2997ff;
        --vds-border: rgba(255, 255, 255, 0.1);

        --vds-glass-bg: rgba(0, 0, 0, 0.6);
        --vds-glass-border: rgba(255, 255, 255, 0.24);
        --vds-icon-bg: #ffffff;
        --vds-icon-fg: #000000;

        --vds-focus-ring: #ffffff;
        --vds-focus-ring-contrast: #ffffff;
    }
}

/* --- OVERRIDE ESPLICITO DARK --- */
[data-theme="dark"] {
    --vds-bg: #000000;
    --vds-surface: rgba(29, 29, 31, 0.85);
    --vds-card-bg: #1d1d1f;

    --vds-text: #f5f5f7;
    --vds-text-dim: #d1d5db;
    --vds-text-soft: #e5e7eb;
    --vds-text-strong: #ffffff;

    --vds-accent: #2997ff;
    --vds-border: rgba(255, 255, 255, 0.1);

    --vds-glass-bg: rgba(0, 0, 0, 0.6);
    --vds-glass-border: rgba(255, 255, 255, 0.24);
    --vds-icon-bg: #ffffff;
    --vds-icon-fg: #000000;

    --vds-focus-ring: #ffffff;
    --vds-focus-ring-contrast: #ffffff;
}

/* --- OVERRIDE ESPLICITO LIGHT --- */
[data-theme="light"] {
    --vds-bg: #f5f5f7;
    --vds-surface: rgba(255, 255, 255, 0.88);
    --vds-card-bg: #ffffff;

    --vds-text: #1d1d1f;
    --vds-text-dim: #6b7280;
    --vds-text-soft: #374151;
    --vds-text-strong: #0f172a;

    --vds-accent: #0071e3;
    --vds-border: rgba(0, 0, 0, 0.1);

    --vds-glass-bg: rgba(255, 255, 255, 0.78);
    --vds-glass-border: rgba(0, 0, 0, 0.12);
    --vds-icon-bg: #0f172a;
    --vds-icon-fg: #ffffff;

    --vds-focus-ring: #0a84ff;
    --vds-focus-ring-contrast: #111827;
}

/* --- Utility per Performance --- */
.vds-gpu {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.vds-no-scroll {
    overflow: hidden;
}