:root {
    --ui-color-bg: #121417;
    --ui-color-surface: #16181c;
    --ui-color-surface-2: #1b1e23;
    --ui-color-surface-3: #272729;
    --ui-color-border: rgba(255, 255, 255, 0.08);
    --ui-color-border-strong: rgba(255, 255, 255, 0.14);
    --ui-color-text: #ffffff;
    --ui-color-text-muted: #9aa0a6;
    --ui-color-text-soft: #dcdde0;
    --ui-color-accent: #3282d7;
    --ui-color-accent-hover: #2266b0;
    --ui-color-accent-soft: rgba(50, 130, 215, 0.16);
    --ui-color-success: #3d9966;
    --ui-color-success-hover: #2f7f53;
    --ui-color-danger: #dc4e41;
    --ui-color-danger-hover: #bd3c31;
    --ui-color-warning: #f59e0b;
    --ui-color-info: #3b82f6;
    --ui-color-overlay: rgba(0, 0, 0, 0.58);

    --ui-radius-sm: 12px;
    --ui-radius-md: 16px;
    --ui-radius-lg: 22px;
    --ui-radius-xl: 24px;
    --ui-radius-pill: 999px;

    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;

    --ui-shadow-sheet: 0 -18px 48px rgba(0, 0, 0, 0.32);
    --ui-shadow-modal: 0 18px 48px rgba(0, 0, 0, 0.38);
    --ui-duration-fast: 160ms;
    --ui-duration-base: 220ms;
    --ui-duration-slow: 320ms;
    --ui-ease-standard: cubic-bezier(0.25, 0.8, 0.25, 1);

    --ui-z-dropdown: 900;
    --ui-z-overlay: 9990;
    --ui-z-sheet: 10000;
    --ui-z-toast: 10020;
}