: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-secondary: #334155;
    --cos-color-secondary-hover: #1e293b;
    --cos-color-success: #1f9d55;
    --cos-color-warning: #d97706;
    --cos-color-danger: #dc2626;
    --cos-color-info: #0284c7;
    --cos-color-overlay: rgba(15, 23, 42, 0.45);

    --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-radius-xl: 16px;

    --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-shadow-lg: 0 12px 28px rgba(2, 8, 23, 0.18);

    --cos-ring-width: 3px;
    --cos-ring-color: rgba(15, 108, 191, 0.24);

    --cos-z-header: 100;
    --cos-z-topbar: 110;
    --cos-z-dropdown: 500;
    --cos-z-overlay: 900;
    --cos-z-modal: 1000;
    --cos-z-drawer: 990;

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