/*
 * Ant Design v5 token bridge.
 *
 * The management UI is still a lightweight vanilla HTML surface. These tokens
 * make Ant Design the styling contract now, while allowing a gradual migration
 * to React + antd components.
 */
@layer tokens, base, layout, controls, data-display, overlays, domains, utilities;

@layer tokens {
:root,
[data-ui-library="antd"] {
  --ant-color-primary: #1677ff;
  --ant-color-success: #52c41a;
  --ant-color-warning: #faad14;
  --ant-color-error: #ff4d4f;
  --ant-color-info: #1677ff;
  --ant-color-bg-layout: #0f1117;
  --ant-color-bg-container: #1f2430;
  --ant-color-bg-elevated: #242938;
  --ant-color-bg-container-disabled: rgba(255, 255, 255, .04);
  --ant-color-fill-tertiary: rgba(255, 255, 255, .04);
  --ant-color-fill-quaternary: rgba(255, 255, 255, .025);
  --ant-color-border: #3a4052;
  --ant-color-border-secondary: #2f3545;
  --ant-color-text: #f0f2f5;
  --ant-color-text-secondary: #a6adbf;
  --ant-color-text-tertiary: #7d869c;
  --ant-color-text-disabled: #636b80;
  --ant-color-text-light-solid: #fff;
  --ant-color-success-bg: rgba(82, 196, 26, .1);
  --ant-color-success-border: rgba(82, 196, 26, .35);
  --ant-color-warning-bg: rgba(250, 173, 20, .1);
  --ant-color-warning-border: rgba(250, 173, 20, .35);
  --ant-color-error-bg: rgba(255, 77, 79, .1);
  --ant-color-error-border: rgba(255, 77, 79, .35);
  --ant-color-info-bg: rgba(22, 119, 255, .1);
  --ant-color-info-border: rgba(22, 119, 255, .35);
  --ant-border-radius: 6px;
  --ant-border-radius-sm: 4px;
  --ant-border-radius-lg: 8px;
  --ant-border-radius-xl: 10px;
  --ant-font-size: 13px;
  --ant-font-size-sm: 12px;
  --ant-font-size-xs: 11px;
  --ant-font-size-heading-4: 17px;
  --ant-line-height: 1.5;
  --ant-control-height: 32px;
  --ant-control-height-sm: 24px;
  --ant-control-height-xs: 20px;
  --ant-control-outline: rgba(22, 119, 255, .45);
  --ant-control-item-bg-hover: rgba(255, 255, 255, .04);
  --ant-control-item-bg-active: rgba(22, 119, 255, .16);
  --ant-motion-duration-fast: .12s;
  --ant-motion-duration-mid: .2s;
  --ant-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ant-font-family-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --ant-box-shadow-secondary: 0 24px 60px rgba(0, 0, 0, .5);

  --bg: var(--ant-color-bg-layout);
  --panel: var(--ant-color-bg-container);
  --surface: var(--ant-color-bg-elevated);
  --border: var(--ant-color-border-secondary);
  --text: var(--ant-color-text);
  --muted: var(--ant-color-text-secondary);
  --accent: var(--ant-color-primary);
  --green: var(--ant-color-success);
  --amber: var(--ant-color-warning);
  --red: var(--ant-color-error);
  --teal: #13c2c2;
  --purple: #9254de;

  --ds-color-hover-bg: var(--ant-control-item-bg-hover);
  --ds-color-subtle-hover-bg: var(--ant-color-fill-quaternary);
  --ds-color-active-bg: var(--ant-control-item-bg-active);
  --ds-color-disabled-bg: var(--ant-color-bg-container-disabled);
  --ds-color-disabled-text: var(--ant-color-text-disabled);
  --ds-color-focus-ring: var(--ant-control-outline);
  --ds-color-success-bg: var(--ant-color-success-bg);
  --ds-color-success-border: var(--ant-color-success-border);
  --ds-color-warning-bg: var(--ant-color-warning-bg);
  --ds-color-warning-border: var(--ant-color-warning-border);
  --ds-color-error-bg: var(--ant-color-error-bg);
  --ds-color-error-border: var(--ant-color-error-border);
  --ds-color-info-bg: var(--ant-color-info-bg);
  --ds-color-info-border: var(--ant-color-info-border);
  --ds-color-muted-bg: rgba(107, 112, 144, .1);
  --ds-color-muted-border: rgba(107, 112, 144, .25);
  --ds-color-domain-teal: #13c2c2;
  --ds-color-domain-purple: #9254de;
  --ds-color-teal-bg: rgba(19, 194, 194, .12);
  --ds-color-teal-border: rgba(19, 194, 194, .32);
  --ds-color-purple-bg: rgba(146, 84, 222, .12);
  --ds-color-purple-border: rgba(146, 84, 222, .32);
  --ds-color-overlay-bg: rgba(0, 0, 0, .65);
  --ds-color-sunken-bg: rgba(0, 0, 0, .15);
  --ds-color-switch-bg: #3a3d55;
  --ds-focus-ring: 0 0 0 2px var(--ds-color-focus-ring);
  --ds-transition-fast: color var(--ant-motion-duration-fast) ease,
    background-color var(--ant-motion-duration-fast) ease,
    border-color var(--ant-motion-duration-fast) ease,
    box-shadow var(--ant-motion-duration-fast) ease;
  --ds-space-page: 18px;
  --ds-space-section: 16px;
  --ds-space-toolbar: 8px;
  --ds-space-cell-x: 12px;
  --ds-space-cell-y: 8px;
  --ds-space-control-x: 10px;
  --ds-space-control-y: 6px;
  --ds-modal-width: 720px;
  --ds-modal-width-compact: 480px;
  --ds-modal-width-wide: 1240px;
  --ds-z-overlay: 1000;
  --ds-z-modal: 1010;
  --ds-z-modal-legacy: 9999;
}

[data-ui-library="antd"] {
  font-family: var(--ant-font-family);
}

[data-ui-library="antd"] .btn,
[data-ui-library="antd"] .ds-btn,
[data-ui-library="antd"] .action-btn,
[data-ui-library="antd"] .ds-action-btn,
[data-ui-library="antd"] .mini-btn,
[data-ui-library="antd"] .ds-mini-btn,
[data-ui-library="antd"] .modal-close,
[data-ui-library="antd"] .ds-modal-close,
[data-ui-library="antd"] input,
[data-ui-library="antd"] select,
[data-ui-library="antd"] textarea {
  border-radius: var(--ant-border-radius);
  font-family: var(--ant-font-family);
}

[data-ui-library="antd"] .panel,
[data-ui-library="antd"] .modal-box,
[data-ui-library="antd"] .ds-modal-box,
[data-ui-library="antd"] .table-wrap,
[data-ui-library="antd"] .ds-table-wrap,
[data-ui-library="antd"] .log-section {
  border-color: var(--ant-color-border-secondary);
}

[data-ui-library="antd"] .btn.primary,
[data-ui-library="antd"] .ds-btn-primary {
  background: var(--ant-color-primary);
  border-color: var(--ant-color-primary);
}

[data-ui-library="antd"] .btn.success,
[data-ui-library="antd"] .ds-btn-success {
  background: var(--ant-color-success);
  border-color: var(--ant-color-success);
}

[data-ui-library="antd"] .btn.danger,
[data-ui-library="antd"] .ds-btn-danger {
  border-color: var(--ds-color-error-border);
  color: var(--ant-color-error);
}

[data-ui-library="antd"] .badge.ok,
[data-ui-library="antd"] .ds-badge-ok {
  color: var(--ant-color-success);
  border-color: var(--ds-color-success-border);
}

[data-ui-library="antd"] .badge.error,
[data-ui-library="antd"] .ds-badge-error {
  color: var(--ant-color-error);
  border-color: var(--ds-color-error-border);
}

[data-ui-library="antd"] .badge.fetching,
[data-ui-library="antd"] .ds-badge-fetching {
  color: var(--ant-color-info);
  border-color: var(--ds-color-info-border);
}
}