:root {
    --rounded-none: 0;
    --rounded-sm: 0.125rem;
    --rounded: 0.25rem;
    --rounded-md: 0.375rem;
    --rounded-lg: 0.5rem;
    --rounded-xl: 0.75rem;
    --rounded-2xl: 1rem;
    --rounded-full: 9999px;

    --shadow-opacity: 0.1;
    --shadow-opacity-sm: 0.05;
    --shadow-opacity-heavy: 0.25;
    --shadow-sm: 0 1px 2px 0 rgba(var(--black-rgb), var(--shadow-opacity-sm));
    --shadow-md: 0 4px 6px -1px rgba(var(--black-rgb), var(--shadow-opacity)), 0 2px 4px -2px rgba(var(--black-rgb), var(--shadow-opacity));
    --shadow-lg: 0 10px 15px -3px rgba(var(--black-rgb), var(--shadow-opacity)), 0 4px 6px -4px rgba(var(--black-rgb), var(--shadow-opacity));
    --shadow-xl: 0 20px 25px -5px rgba(var(--black-rgb), var(--shadow-opacity)), 0 8px 10px -6px rgba(var(--black-rgb), var(--shadow-opacity));
    --shadow-2xl: 0 25px 50px -12px rgba(var(--black-rgb), var(--shadow-opacity-heavy));

    --blur-xl: 24px;

    --opacity-5: 0.05;
    --opacity-10: 0.1;
    --opacity-15: 0.15;
    --opacity-20: 0.2;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-95: 0.95;

    --scale-95: 0.95;
    --scale-98: 0.98;
    --scale-105: 1.05;

    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;

    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --z-40: 40;
    --z-50: 50;
    --z-alerts: 100;

    --transition-fast: var(--duration-150) var(--ease-in-out);
    --transition-normal: var(--duration-200) var(--ease-in-out);
    --transition-slow: var(--duration-300) var(--ease-in-out);

    --glass-bg: rgba(var(--white-rgb), var(--opacity-95));
    --glass-blur: blur(var(--blur-xl));
    --glass-border: 1px solid rgba(var(--black-rgb), var(--opacity-5));

    --focus-ring: 0 0 0 4px rgba(var(--primary-rgb), var(--opacity-10));
    --focus-ring-error: 0 0 0 4px rgba(var(--red-500-rgb), var(--opacity-10));
    --focus-ring-sm: 0 0 0 3px rgba(var(--primary-rgb), var(--opacity-20));
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(var(--scale-95)); }
    to { opacity: 1; transform: scale(1); }
}