/* Mirrored from palette.ts for first paint; check:ui-architecture enforces parity. */
:root {
  --color-bg-layout: #f4f6f7;
  --color-bg-container: #ffffff;
  --color-bg-subtle: #f7f9fa;
  --color-nav: #20313a;
  --color-nav-active: #2b596e;
  --color-nav-text: #d9e3e8;
  --color-text: #18212b;
  --color-text-secondary: #5e6b76;
  --color-border: #d7dee3;
  --color-primary: #176b87;
  --color-primary-hover: #125970;
  --color-success: #2a7655;
  --color-warning: #995f00;
  --color-danger: #b4232c;
  --color-info: #36728f;
  --color-focus: #4f8094;
  --color-bg-info: color-mix(in srgb, var(--color-info) 9%, var(--color-bg-container));
  --color-bg-success: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-container));
  --color-bg-warning: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-container));
  --color-bg-danger: color-mix(in srgb, var(--color-danger) 9%, var(--color-bg-container));
  --color-border-interactive: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  --color-border-info: color-mix(in srgb, var(--color-info) 38%, var(--color-border));
  --color-border-success: color-mix(in srgb, var(--color-success) 38%, var(--color-border));
  --color-border-warning: color-mix(in srgb, var(--color-warning) 38%, var(--color-border));
  --color-border-danger: color-mix(in srgb, var(--color-danger) 38%, var(--color-border));
  --color-text-placeholder: var(--color-text-secondary);
  --color-text-on-solid: #ffffff;
  --color-code-bg: #0d2436;
  --color-code-surface: #17364d;
  --color-code-border: #24445b;
  --color-code-text: #d7e6f2;
  --color-code-muted: #9db3c3;
  --color-code-tag: #69b7e3;
  --color-code-attribute: #a8d58d;
  --color-code-string: #e8c883;
  --color-code-operator: #d7a5df;
  --color-chart-primary: #2a6f99;
  --color-chart-success: #2d8b64;
  --color-chart-warning: #d29a36;
  --color-chart-danger: #b63a43;
  --color-chart-grid: #e5eaee;
  --shadow-low: 0 2px 10px rgb(17 35 45 / 10%);
  --shadow-medium: 0 8px 24px rgb(17 35 45 / 18%);
  --shadow-elevated: 0 16px 40px rgb(17 35 45 / 18%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-control: 4px;
  --radius-container: 6px;
  --radius-overlay: 8px;
  --layer-navigation: 20;
  --layer-skip-link: 30;
  --font-ui: "IBM Plex Sans Variable", "Noto Sans SC Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --bg: var(--color-bg-layout);
  --panel: var(--color-bg-container);
  --panel2: var(--color-bg-subtle);
  --line: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-secondary);
  --accent: var(--color-primary);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-layout: #0e151a;
  --color-bg-container: #151f25;
  --color-bg-subtle: #1b282f;
  --color-nav: #0b1216;
  --color-nav-active: #214758;
  --color-nav-text: #d9e3e8;
  --color-text: #e7edf0;
  --color-text-secondary: #aab6bc;
  --color-border: #34434b;
  --color-primary: #64a9c3;
  --color-primary-hover: #78b8cf;
  --color-success: #65b98e;
  --color-warning: #d6a84d;
  --color-danger: #e27279;
  --color-info: #69a7c3;
  --color-focus: #7ebbd0;
  --color-text-on-solid: #0e151a;
  --color-code-bg: #101a22;
  --color-code-surface: #17364d;
  --color-code-border: #405462;
  --color-code-text: #e5eff5;
  --color-code-muted: #9db3c3;
  --color-code-tag: #69b7e3;
  --color-code-attribute: #a8d58d;
  --color-code-string: #e8c883;
  --color-code-operator: #d7a5df;
  --color-chart-primary: #64a9c3;
  --color-chart-success: #65b98e;
  --color-chart-warning: #d6a84d;
  --color-chart-danger: #e27279;
  --color-chart-grid: #293844;
  --shadow-low: 0 2px 10px rgb(0 0 0 / 22%);
  --shadow-medium: 0 8px 24px rgb(0 0 0 / 32%);
  --shadow-elevated: 0 16px 44px rgb(0 0 0 / 42%);
}

* { box-sizing: border-box; }
html, body, #root { min-width: 0; min-height: 100%; margin: 0; }
body {
  background: var(--color-bg-layout);
  color: var(--color-text);
  font: 14px/1.5 var(--font-ui);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}
strong, b { font-weight: 600; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mono, [data-mono] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* 非零时长即使很短，也会使 rc-trigger 的同步坐标测量读到过渡起点。 */
    transition: none !important;
  }
}