:root {
    --cos-color-bg: #f6f8fb;
    --cos-color-surface: #ffffff;
    --cos-color-surface-muted: #f1f5f9;
    --cos-color-text: #1f2937;
    --cos-color-text-muted: #64748b;
    --cos-color-border: #dbe3ee;
    --cos-color-primary: #0f6cbf;
    --cos-color-primary-hover: #0b5ca2;
    --cos-color-success: #1f9d55;
    --cos-color-warning: #d97706;
    --cos-color-danger: #dc2626;
    --cos-color-info: #0284c7;

    --cos-font-family-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cos-font-size-xs: 12px;
    --cos-font-size-sm: 13px;
    --cos-font-size-md: 14px;
    --cos-font-size-lg: 16px;
    --cos-font-size-xl: 18px;
    --cos-line-height: 1.5;

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

    --cos-radius-sm: 4px;
    --cos-radius-md: 8px;
    --cos-radius-lg: 12px;

    --cos-shadow-sm: 0 1px 2px rgba(2, 8, 23, 0.08);
    --cos-shadow-md: 0 4px 12px rgba(2, 8, 23, 0.12);

    --cos-z-header: 100;
    --cos-z-topbar: 110;
    --cos-z-dropdown: 500;
    --cos-z-overlay: 900;

    --cos-bp-xs: 480px;
    --cos-bp-sm: 768px;
    --cos-bp-md: 992px;
    --cos-bp-lg: 1200px;
}