:root {
  /* Primitive tokens */
  --kbx-font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
  --kbx-font-xs: 12px;
  --kbx-font-sm: 13px;
  --kbx-font-md: 14px;
  --kbx-font-lg: 16px;
  --kbx-font-xl: 18px;
  --kbx-font-2xl: 20px;
  --kbx-white: #ffffff;
  --kbx-gray-25: #fcfcfd;
  --kbx-gray-50: #f9fafb;
  --kbx-gray-100: #f2f4f7;
  --kbx-gray-200: #e4e7ec;
  --kbx-gray-300: #d0d5dd;
  --kbx-gray-400: #98a2b3;
  --kbx-gray-500: #667085;
  --kbx-gray-700: #344054;
  --kbx-gray-900: #101828;
  --kbx-blue-600: #175cd3;
  --kbx-green-600: #039855;
  --kbx-orange-500: #f79009;
  --kbx-red-600: #d92d20;
  --kbx-space-0: 0;
  --kbx-space-1: 4px;
  --kbx-space-2: 8px;
  --kbx-space-3: 12px;
  --kbx-space-4: 16px;
  --kbx-space-5: 20px;
  --kbx-space-6: 24px;
  --kbx-space-8: 32px;
  --kbx-space-10: 40px;
  --kbx-space-12: 48px;
  --kbx-radius-sm: 4px;
  --kbx-radius-md: 6px;
  --kbx-radius-lg: 8px;
  --kbx-border-width: 1px;
  --kbx-accent-border-width: 4px;
  --kbx-radius-pill: 999px;

  /* Semantic tokens */
  --kbx-color-surface: var(--kbx-white);
  --kbx-color-surface-muted: var(--kbx-gray-50);
  --kbx-color-surface-subtle: var(--kbx-gray-100);
  --kbx-color-surface-hover: #f3f7fd;
  --kbx-color-text: #1d2939;
  --kbx-color-text-muted: var(--kbx-gray-500);
  --kbx-color-border: var(--kbx-gray-200);
  --kbx-color-border-strong: var(--kbx-gray-400);
  --kbx-color-primary: var(--kbx-blue-600);
  --kbx-color-success: var(--kbx-green-600);
  --kbx-color-warning: var(--kbx-orange-500);
  --kbx-color-danger: var(--kbx-red-600);
  --kbx-color-focus: #1570ef;
  --kbx-color-overlay: rgba(16, 24, 40, .38);
  --kbx-color-workspace: #f5f7fa;
  --kbx-color-shell-chrome: #ffffff;
  --kbx-color-navigation-surface: #fbfcfe;
  --kbx-color-section-heading: #f7f9fc;
  --kbx-color-module-accent: var(--kbx-blue-600);
  --kbx-color-module-accent-surface: #eff8ff;
  --kbx-color-module-accent-border: #b2ddff;
  --kbx-shadow-shell: 0 1px 2px rgba(16,24,40,.05);
  --kbx-color-info-surface: #eff8ff;
  --kbx-color-info-border: #b2ddff;
  --kbx-color-success-surface: #ecfdf3;
  --kbx-color-success-border: #abefc6;
  --kbx-color-warning-surface: #fffaeb;
  --kbx-color-warning-border: #fedf89;
  --kbx-color-warning-text: #b54708;
  --kbx-color-danger-surface: #fef3f2;
  --kbx-color-danger-border: #fecdca;
  --kbx-color-changed-surface: var(--kbx-color-info-surface);
  --kbx-color-changed-border: #84adff;
  --kbx-color-ai-surface: #f4f3ff;
  --kbx-color-ai-border: #c3b5fd;
  --kbx-color-ai-text: #5925dc;
  --kbx-shadow-overlay: 0 16px 40px rgba(16,24,40,.18);
  --kbx-z-runtime-panel: 120;
  --kbx-visually-hidden-size: 1px;

  /* Component tokens */
  --kbx-control-height: 34px;
  --kbx-grid-row-height: 34px;
  --kbx-grid-header-height: 36px;
  --kbx-page-header-height: 48px;
  --kbx-command-bar-height: 44px;
  --kbx-label-width: 96px;
  --kbx-control-touch: 52px;
  --kbx-control-xs: 28px;
  --kbx-control-sm: 32px;
  --kbx-control-md: 36px;
  --kbx-control-lg: 40px;
  --kbx-textarea-min-height: 96px;
  --kbx-checkbox-size: 16px;
  --kbx-checkbox-track: 24px;
  --kbx-screen-inline-padding: 12px;
  --kbx-screen-section-gap: 8px;
  --kbx-content-min-height: 240px;
  --kbx-master-list-min-width: 240px;
  --kbx-master-list-compact-width: 280px;
  --kbx-master-width: 42%;
  --kbx-master-detail-min-height: 360px;
  --kbx-master-detail-bottom-min-height: 160px;
  --kbx-master-detail-master-min-sm: 320px;
  --kbx-master-detail-master-min-md: 380px;
  --kbx-master-detail-master-min-lg: 460px;
  --kbx-side-nav-width: 220px;
  --kbx-side-nav-collapsed-width: 56px;
  --kbx-home-max-width: 1280px;
  --kbx-home-search-max-width: 520px;
  --kbx-home-header-min-height: 72px;
  --kbx-home-attention-height: 44px;
  --kbx-home-link-height: 36px;
  --kbx-home-module-column: 56px;
  --kbx-home-module-header-height: 44px;
  --kbx-tooltip-max-width: 320px;
  --kbx-access-max-width: 480px;
  --kbx-wms-mobile-max-width: 520px;
  --kbx-wms-header-min-height: 64px;
  --kbx-data-state-min-height: 160px;
  --kbx-grid-toolbar-height: 36px;
  --kbx-grid-min-height: 320px;
  --kbx-lookup-code-width: 110px;
  --kbx-lookup-name-min-width: 120px;
  --kbx-lookup-button-width: 54px;
  --kbx-search-control-min-width: 130px;
  --kbx-search-control-sm-width: 130px;
  --kbx-search-control-lg-width: 240px;
  --kbx-command-separator-height: 20px;
  --kbx-template-context-min-height: 34px;
  --kbx-progress-step-height: 40px;
  --kbx-progress-step-number-size: 22px;
  --kbx-menu-search-top: 80px;
  --kbx-menu-search-width: 620px;
  --kbx-menu-search-result-height: 46px;
  --kbx-app-shell-min-height: 600px;
  --kbx-runtime-panel-top: 60px;
  --kbx-runtime-panel-width: 420px;
  --kbx-workspace-tabs-height: 40px;
  --kbx-workspace-tab-height: 36px;
  --kbx-workspace-tab-max-width: 220px;
  --kbx-workspace-overflow-width: 180px;
  --kbx-template-refresh-height: 30px;
  --kbx-home-quick-start-min-height: 36px;
  --kbx-shell-notice-height: 34px;
  --kbx-home-module-label-width: 56px;
  --kbx-utility-panel-width: 420px;
  --kbx-form-section-gap: 16px;
  --kbx-form-section-heading-gap: 8px;
  --kbx-form-section-heading-padding: 6px;
  --kbx-form-grid-column-gap: 18px;
  --kbx-form-grid-row-gap: 10px;
  --kbx-home-workbench-row-height: 40px;
  --kbx-home-source-label-width: 68px;
  --kbx-navigation-security-notice-height: 36px;
  --kbx-global-header-module-selector-width: 92px;
  --kbx-import-drop-min-height: 250px;
  --kbx-import-source-column-min-width: 160px;
  --kbx-import-target-column-min-width: 220px;
  --kbx-import-reason-column-min-width: 130px;
  --kbx-import-mapping-name-width: 200px;
  --kbx-summary-item-min-width: 120px;
  --kbx-import-error-row-width: 70px;
  --kbx-import-error-field-width: 160px;
  --kbx-wms-scan-box-min-height: 84px;
  --kbx-wms-manual-button-width: 72px;

}

[data-kbx-theme="dark"] {
  color-scheme: dark;
  --kbx-color-surface: #111827;
  --kbx-color-surface-muted: #0b1220;
  --kbx-color-surface-subtle: #172033;
  --kbx-color-surface-hover: #182943;
  --kbx-color-text: #e5e7eb;
  --kbx-color-text-muted: #94a3b8;
  --kbx-color-border: #334155;
  --kbx-color-border-strong: #64748b;
  --kbx-color-primary: #60a5fa;
  --kbx-color-success: #34d399;
  --kbx-color-warning: #fbbf24;
  --kbx-color-danger: #fb7185;
  --kbx-color-focus: #93c5fd;
  --kbx-color-overlay: rgba(2, 6, 23, .68);
  --kbx-color-info-surface: #102a43;
  --kbx-color-info-border: #285b8f;
  --kbx-color-success-surface: #062e24;
  --kbx-color-success-border: #166534;
  --kbx-color-warning-surface: #33270b;
  --kbx-color-warning-border: #854d0e;
  --kbx-color-warning-text: #fcd34d;
  --kbx-color-danger-surface: #3b1118;
  --kbx-color-danger-border: #9f1239;
  --kbx-color-changed-surface: #102a43;
  --kbx-color-changed-border: #3b82f6;
  --kbx-color-ai-surface: #241b45;
  --kbx-color-ai-border: #6d5bd0;
  --kbx-color-ai-text: #c4b5fd;
  --kbx-shadow-overlay: 0 18px 48px rgba(0,0,0,.42);
  --kbx-color-workspace: #0a1020;
  --kbx-color-shell-chrome: #111827;
  --kbx-color-navigation-surface: #0d1524;
  --kbx-color-section-heading: #151f31;
  --kbx-color-module-accent: #84adff;
  --kbx-color-module-accent-surface: #102a43;
  --kbx-color-module-accent-border: #285b8f;
  --kbx-shadow-shell: 0 1px 2px rgba(0,0,0,.42);
}

[data-kbx-module="OMS"] {
  --kbx-color-module-accent: #175cd3;
  --kbx-color-module-accent-surface: #eff8ff;
  --kbx-color-module-accent-border: #b2ddff;
}

[data-kbx-theme="dark"] [data-kbx-module="OMS"] {
  --kbx-color-module-accent: #84adff;
  --kbx-color-module-accent-surface: #102a43;
  --kbx-color-module-accent-border: #285b8f;
}

[data-kbx-module="ERP"] {
  --kbx-color-module-accent: #6938ef;
  --kbx-color-module-accent-surface: #f4f3ff;
  --kbx-color-module-accent-border: #d9d6fe;
}

[data-kbx-theme="dark"] [data-kbx-module="ERP"] {
  --kbx-color-module-accent: #b9a2ff;
  --kbx-color-module-accent-surface: #241b45;
  --kbx-color-module-accent-border: #6d5bd0;
}

[data-kbx-module="WMS"] {
  --kbx-color-module-accent: #087e8b;
  --kbx-color-module-accent-surface: #ecfdff;
  --kbx-color-module-accent-border: #a5f0fc;
}

[data-kbx-theme="dark"] [data-kbx-module="WMS"] {
  --kbx-color-module-accent: #63c5da;
  --kbx-color-module-accent-surface: #0d2f36;
  --kbx-color-module-accent-border: #1f6672;
}

[data-kbx-module="COMMON"] {
  --kbx-color-module-accent: #475467;
  --kbx-color-module-accent-surface: #f2f4f7;
  --kbx-color-module-accent-border: #d0d5dd;
}

[data-kbx-theme="dark"] [data-kbx-module="COMMON"] {
  --kbx-color-module-accent: #b3b8c4;
  --kbx-color-module-accent-surface: #172033;
  --kbx-color-module-accent-border: #475467;
}

html, body, button, input, select, textarea {
  font-family: var(--kbx-font-family);
}

[data-kbx-density="comfortable"] {
  --kbx-control-height: 38px;
  --kbx-grid-row-height: 40px;
  --kbx-grid-header-height: 40px;
}

[data-kbx-density="touch"] {
  --kbx-control-height: 52px;
  --kbx-grid-row-height: 52px;
  --kbx-grid-header-height: 48px;
}

:focus-visible {
  outline: 2px solid var(--kbx-color-focus);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  :root, [data-kbx-theme="light"], [data-kbx-theme="dark"] {
    --kbx-color-surface: Canvas;
    --kbx-color-surface-muted: Canvas;
    --kbx-color-surface-subtle: Canvas;
    --kbx-color-surface-hover: Highlight;
    --kbx-color-text: CanvasText;
    --kbx-color-text-muted: CanvasText;
    --kbx-color-border: ButtonBorder;
    --kbx-color-border-strong: CanvasText;
    --kbx-color-primary: LinkText;
    --kbx-color-success: CanvasText;
    --kbx-color-warning: CanvasText;
    --kbx-color-danger: CanvasText;
    --kbx-color-focus: Highlight;
    --kbx-color-info-surface: Canvas;
    --kbx-color-success-surface: Canvas;
    --kbx-color-warning-surface: Canvas;
    --kbx-color-danger-surface: Canvas;
    --kbx-color-ai-surface: Canvas;
    --kbx-color-module-accent: Highlight;
    --kbx-color-module-accent-surface: Canvas;
    --kbx-color-module-accent-border: Highlight;
    --kbx-color-workspace: Canvas;
    --kbx-color-shell-chrome: Canvas;
    --kbx-color-navigation-surface: Canvas;
    --kbx-color-section-heading: Canvas;
    --kbx-shadow-shell: none;
    --kbx-shadow-overlay: none;
  }
  :focus-visible { outline-color: Highlight; }
}
