:root {
    color-scheme: light;
    --ui-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --ui-color-canvas: #f4f7fb;
    --ui-color-surface: #ffffff;
    --ui-color-surface-subtle: #f8fafc;
    --ui-color-surface-muted: #eef3f8;
    --ui-color-text: #10233e;
    --ui-color-text-muted: #607089;
    --ui-color-text-subtle: #8190a5;
    --ui-color-border: #d7e1ec;
    --ui-color-border-strong: #b9c8d9;
    --ui-color-primary: #2457d6;
    --ui-color-primary-hover: #1d46ad;
    --ui-color-primary-active: #17398e;
    --ui-color-primary-soft: #eaf0ff;
    --ui-color-info: #2563a8;
    --ui-color-info-soft: #eaf4ff;
    --ui-color-success: #147a58;
    --ui-color-success-soft: #eaf8f2;
    --ui-color-warning: #9a5b08;
    --ui-color-warning-soft: #fff6df;
    --ui-color-danger: #b42318;
    --ui-color-danger-hover: #912018;
    --ui-color-danger-soft: #fff0ee;
    --ui-color-overlay: rgb(16 35 62 / 48%);
    --ui-color-navigation: #10233e;
    --ui-color-navigation-text: #cbd7e8;
    --ui-color-navigation-muted: #8190a5;

    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;

    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-radius-xl: 20px;
    --ui-radius-pill: 999px;

    --ui-control-sm: 36px;
    --ui-control-md: 40px;
    --ui-control-lg: 44px;
    --ui-shell-sidebar-width: 248px;
    --ui-shell-sidebar-collapsed-width: 72px;
    --ui-shell-topbar-height: 64px;
    --ui-shell-page-gap: 24px;
    --ui-font-xs: 12px;
    --ui-font-sm: 13px;
    --ui-font-body: 14px;
    --ui-font-control-mobile: 16px;
    --ui-font-card-title: 16px;
    --ui-font-section-title: 19px;
    --ui-font-page-title: 26px;

    --ui-shadow-control: 0 1px 3px rgb(16 35 62 / 18%);
    --ui-shadow-popover: 0 12px 32px rgb(16 35 62 / 14%);
    --ui-shadow-dialog: 0 24px 72px rgb(16 35 62 / 22%);
    --ui-focus-ring: 0 0 0 3px rgb(36 87 214 / 24%);
    --ui-z-dropdown: 40;
    --ui-z-sticky: 50;
    --ui-z-dialog: 80;
    --ui-z-toast: 1600;
    --ui-duration-fast: 120ms;
    --ui-duration-normal: 180ms;
    --ui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 640px) {
    :root {
        --ui-font-page-title: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ui-duration-fast: 0ms;
        --ui-duration-normal: 0ms;
    }
}
