@font-face {
    font-family: "Noto Sans";
    src: url("./fonts/Noto-Sans-Variable.37de02cdab6d.ttf") format("truetype-variations");
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-display: swap;
}

:root {
    --ui-font: "Noto Sans", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --ui-font-mono: "Noto Sans", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --ui-font-size-body: 13px;
    --ui-font-size-control: 13px;
    --ui-font-size-label: 11px;
    --ui-font-size-caption: 11px;
    --ui-font-size-table: 12px;
    --ui-font-size-heading-card: 14px;
    --ui-font-size-card-title: var(--ui-font-size-heading-card);
    --ui-font-size-section-title: 16px;
    --ui-font-size-page-title: 24px;
    --ui-font-size-page-title-mobile: 22px;
    --ui-font-size-kpi: 24px;
    --ui-font-weight-regular: 400;
    --ui-font-weight-medium: 500;
    --ui-font-weight-semibold: 600;
    --ui-font-weight-bold: 700;
    --ui-line-height-body: 1.5;
    --ui-line-height-compact: 1.4;
    --ui-line-height-tight: 1.2;
    --ui-bg: #eef1f5;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f7f8fa;
    --ui-surface-subtle: var(--ui-surface-soft);
    --ui-surface-muted: #f1f3f6;
    --ui-sidebar: #1f2630;
    --ui-sidebar-hover: #2a3442;
    --ui-sidebar-active: #344155;
    --ui-text: #142033;
    --ui-text-secondary: #48586b;
    --ui-muted: #68788b;
    --ui-text-muted: var(--ui-muted);
    --ui-border: #cbd3dd;
    --ui-border-strong: #b7c1cd;
    --ui-border-soft: #e1e6ec;
    --ui-primary: #2b67d1;
    --ui-primary-hover: #2459b8;
    --ui-primary-soft: #eaf1ff;
    --ui-danger: #b42318;
    --ui-danger-hover: #912018;
    --ui-danger-soft: #fff0ee;
    --ui-warning: #9a6700;
    --ui-warning-hover: #805600;
    --ui-warning-soft: #fff8e6;
    --ui-success: #216e4e;
    --ui-success-soft: #eaf7f1;
    --ui-focus-ring: rgba(43, 103, 209, .20);
    --ui-backdrop: rgba(15, 23, 42, .48);

    /* Spacing scale: the only general-purpose layout increments. */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 24px;
    --ui-space-6: 32px;
    --ui-space-7: 40px;
    --ui-space-8: 48px;

    --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --ui-shadow-md: 0 10px 30px rgba(16, 24, 40, .10);
    --ui-shadow-modal: 0 22px 70px rgba(15, 23, 42, .25);
    --ui-radius-control: 5px;
    --ui-radius-card: 7px;
    --ui-radius-modal: 10px;
    --ui-radius-pill: 999px;
    --ui-border-width: 1px;

    --ui-control-height-small: 32px;
    --ui-control-height: 36px;
    --ui-control-height-touch: 44px;
    --ui-control-padding-inline: 12px;

    --ui-sidebar-width: 232px;
    --ui-topbar-height: 52px;
    --ui-content-max-width: 1760px;
    --ui-page-gutter: 16px;
    --ui-section-gap: 16px;
    --ui-card-gap: 12px;

    --ui-z-topbar: 50;
    --ui-z-sidebar-backdrop: 60;
    --ui-z-sidebar: 70;
    --ui-z-dropdown: 90;
    --ui-z-toast: 110;
    --ui-z-modal: 200;
    --ui-transition-fast: 120ms ease;
    --ui-transition-base: 180ms ease;

    /* Compatibility aliases for logistics pages migrated from the ERP shell.
       They resolve to canonical UI tokens, so the old names cannot drift. */
    --erp-text: var(--ui-text);
    --erp-text-muted: var(--ui-muted);
    --erp-border: var(--ui-border);
    --erp-border-soft: var(--ui-border-soft);
    --erp-primary: var(--ui-primary);
    --erp-surface: var(--ui-surface);
}