:root {
    --color-brand: #175CF6;
    --color-brand-hover: #1147C9;
    --color-brand-soft: #E8F0FF;
    --color-brand-tint: rgba(23, 92, 246, 0.16);

    --color-navy: #0E2A4A;
    --color-navy-hover: #163A63;
    --color-navy-active: #1C4A7A;
    --color-navy-text: #C5D4E8;
    --color-navy-muted: #8AA0BB;

    --color-canvas: #F3F5F8;
    --color-surface: #FFFFFF;
    --color-text: #1C2430;
    --color-text-muted: #667085;
    --color-text-inverse: #FFFFFF;
    --color-border: #E4E7EC;
    --color-border-strong: #D0D5DD;

    --color-success: #12B76A;
    --color-success-soft: #ECFDF3;
    --color-success-text: #027A48;
    --color-warning: #F79009;
    --color-warning-soft: #FFFAEB;
    --color-warning-text: #B54708;
    --color-danger: #D92D20;
    --color-danger-hover: #B42318;
    --color-danger-soft: #FEF3F2;
    --color-danger-text: #B42318;
    --color-info-soft: #EFF8FF;

    --font-sans: Gilroy, "Segoe UI", sans-serif;
    --font-size-body: 14px;
    --line-height-body: 20px;
    --font-size-h1: 22px;
    --line-height-h1: 28px;
    --font-size-h2: 16px;
    --line-height-h2: 22px;
    --font-size-caption: 12px;
    --line-height-caption: 16px;

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

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-modal: 0 12px 32px rgba(16, 24, 40, 0.16);
    --focus-ring: 0 0 0 3px rgba(23, 92, 246, 0.24);

    --sidebar-width: 256px;
    --sidebar-collapsed: 72px;
    --topbar-height: 56px;
    --control-height: 40px;
    --control-height-sm: 32px;
}