:root {
    /* ─── Colors ─── */
    --color-primary: #5d0887;
    --color-primary-hover: #4e0673;
    --color-primary-dark: #3c055a;
    --color-primary-rgb: 93, 8, 135;
    --color-danger: #f44336;
    --color-danger-hover: #d32f2f;
    --color-danger-old-hover: #da190b;
    --color-danger-dark: #e74c3c;
    --color-danger-rgb: 244, 67, 54;
    --color-online: #2ecc71;
    --color-sidebar: #2a2728;
    --color-sidebar-text: rgba(255,255,255,0.7);
    --color-sidebar-text-muted: rgba(255,255,255,0.4);
    --color-sidebar-border: rgba(255,255,255,0.1);
    --color-sidebar-hover: rgba(255,255,255,0.1);
    --color-sidebar-active: rgba(255,255,255,0.15);
    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-text-muted: #999;
    --color-text-on-primary: #fff;
    --color-bg-body: #f5f5f5;
    --color-bg-card: #fff;
    --color-bg-muted: #f0f0f0;
    --color-bg-subtle: #fafafa;
    --color-bg-hover: #f8f9fa;
    --color-bg-admin: #f0f2f5;
    --color-bg-user-info: #f9f9f9;
    --color-bg-role-admin: #fff3e0;
    --color-bg-role-user: #e8f5e9;
    --color-text-role-admin: #e65100;
    --color-text-role-user: #3c055a;
    --color-border: #ddd;
    --color-border-light: #eee;
    --color-deleted-user: #95a5a6;
    --color-overlay-rgb: 0, 0, 0;

    /* ─── Shadows ─── */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.2);

    /* ─── Spacing (4px base) ─── */
    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs: 12px;
    --space-sm: 16px;
    --space-md: 20px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 56px;

    /* ─── Font Sizes ─── */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 16px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;

    /* ─── Border Radius ─── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 24px;
    --radius-full: 50%;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #e4e4e7;
        --color-text-secondary: #a1a1aa;
        --color-text-muted: #71717a;
        --color-bg-body: #121212;
        --color-bg-card: #1e1e2e;
        --color-bg-muted: #2a2a3e;
        --color-bg-subtle: #252535;
        --color-bg-hover: #2d2d40;
        --color-bg-admin: #1a1a2e;
        --color-bg-user-info: #252535;
        --color-bg-role-admin: #4a2800;
        --color-bg-role-user: #1a3a1a;
        --color-text-role-admin: #ffb74d;
        --color-text-role-user: #81c784;
        --color-border: #3f3f50;
        --color-border-light: #34344a;
        --color-deleted-user: #6b7280;
        --color-overlay-rgb: 255, 255, 255;
        --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
        --shadow-md: 0 2px 10px rgba(0,0,0,0.4);
        --shadow-lg: 0 4px 20px rgba(0,0,0,0.5);
    }
}