:root {
    --color-bg: #f3f5f8;
    --color-surface: #ffffff;
    --color-surface-muted: #f7f8fa;
    --color-border: #dfe3e8;
    --color-text: #18202a;
    --color-text-muted: #687383;
    --color-primary: #2f6fed;
    --color-primary-hover: #255bc4;
    --color-primary-soft: #eaf1ff;
    --color-danger: #b42318;
    --color-danger-soft: #fef3f2;
    --color-success: #16794b;
    --color-warning: #9a6700;
    --border-radius: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --line-height-sm: 16px;
    --line-height-md: 20px;
    --line-height-lg: 26px;
}