:root {
    /* Backgrounds */
    --dv-bg-page: #09090d;
    --dv-bg-surface: #151519;
    --dv-bg-surface-soft: #1a1a20;
    --dv-bg-surface-hover: #202027;

    /* Brand */
    --dv-primary: #9b6cff;
    --dv-primary-hover: #ad87ff;
    --dv-primary-soft: rgba(155, 108, 255, 0.14);
    --dv-primary-border: rgba(155, 108, 255, 0.34);
    --dv-primary-glow: rgba(139, 92, 246, 0.28);

    /* Statuses */
    --dv-success: #3ee98a;
    --dv-success-soft: rgba(20, 190, 93, 0.18);
    --dv-success-border: rgba(32, 225, 117, 0.28);

    --dv-warning: #f4bf50;
    --dv-danger: #ff6477;

    /* Text */
    --dv-text-primary: #f8f8fb;
    --dv-text-secondary: #a4a4b0;
    --dv-text-muted: #747480;

    /* Borders */
    --dv-border: rgba(255, 255, 255, 0.09);
    --dv-border-strong: rgba(255, 255, 255, 0.14);

    /* Shadows */
    --dv-shadow-card:
            0 20px 50px rgba(0, 0, 0, 0.38);

    --dv-shadow-primary:
            0 10px 35px var(--dv-primary-glow);

    --dv-shadow-success:
            0 10px 30px rgba(24, 210, 106, 0.18);

    /* Radius */
    --dv-radius-sm: 10px;
    --dv-radius-md: 16px;
    --dv-radius-lg: 22px;
    --dv-radius-xl: 30px;
    --dv-radius-round: 999px;

    /* Spacing */
    --dv-space-1: 4px;
    --dv-space-2: 8px;
    --dv-space-3: 12px;
    --dv-space-4: 16px;
    --dv-space-5: 20px;
    --dv-space-6: 24px;
    --dv-space-7: 32px;
    --dv-space-8: 40px;
    --dv-space-9: 48px;
    --dv-space-10: 64px;

    /* Typography */
    --dv-font-family:
            Inter,
            Manrope,
            Arial,
            sans-serif;

    --dv-font-size-xs: 12px;
    --dv-font-size-sm: 14px;
    --dv-font-size-md: 16px;
    --dv-font-size-lg: 20px;
    --dv-font-size-xl: 28px;
    --dv-font-size-2xl: 38px;

    /* Animation */
    --dv-transition-fast: 160ms ease;
    --dv-transition-base: 240ms ease;
    --dv-transition-slow: 420ms ease;
}