:root {
    color-scheme: dark;
    --vonzz-bg: #050713;
    --vonzz-bg-glass: rgba(5, 7, 19, .9);
    --vonzz-bg-glass-strong: rgba(5, 7, 19, .95);
    --vonzz-bg-elevated: #0b1020;
    --vonzz-surface: rgba(18, 25, 43, .82);
    --vonzz-surface-strong: #12192b;
    --vonzz-text: #fff;
    --vonzz-muted: #a7b0c3;
    --vonzz-pink: #ff2e73;
    --vonzz-pink-soft: #ff67a7;
    --vonzz-purple: #7a5cff;
    --vonzz-success: #00d26a;
    --vonzz-danger: #ff4d67;
    --vonzz-line: rgba(255, 255, 255, .1);
    --vonzz-line-accent: rgba(255, 46, 115, .45);
    --vonzz-gradient: linear-gradient(135deg, var(--vonzz-pink), var(--vonzz-purple));
    --vonzz-radius-sm: 12px;
    --vonzz-radius-md: 18px;
    --vonzz-radius-lg: 24px;
    --vonzz-radius-xl: 28px;
    --vonzz-shadow: 0 24px 70px rgba(0, 0, 0, .34);
    --vonzz-glow: 0 18px 48px rgba(255, 46, 115, .2);
    --vonzz-motion: 220ms ease;
    --vonzz-mobile-nav-space: calc(92px + env(safe-area-inset-bottom));
}

:focus-visible {
    outline: 2px solid var(--vonzz-pink-soft);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}