:root {
    /* Colors */
    --color-primary: #6889DD;
    --color-primary-hover: #5a7bd6;
    --color-surface: #ffffff;
    --color-text: #1d1d1d;
    --color-text-muted: #666666;
    --color-border: #dddddd;
    --color-border-strong: rgba(163, 177, 211, 0.7);
    --color-bg-subtle: rgba(163, 177, 211, 0.15);

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.20);

    /* Z-index */
    --z-dropdown: 1000;
    --z-overlay: 1040;
    --z-sidebar: 1050;

    /* Spacing (px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Layout */
    --container-max: 1200px;
}