/* CluserAI shared visual foundation. Keep semantic roles stable across standalone pages. */
:root {
  color-scheme: light;
  --ui-bg: #f5f7fa;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f0f3f7;
  --ui-surface-strong: #e9eef4;
  --ui-text: #17202b;
  --ui-muted: #566273;
  --ui-subtle: #6c7888;
  --ui-border: #dce3eb;
  --ui-border-strong: #c5cfdb;
  --ui-primary: #17202b;
  --ui-on-primary: #ffffff;
  --ui-accent: #076b91;
  --ui-focus: #076b91;
  --ui-positive: #216e4e;
  --ui-warning: #8b5a00;
  --ui-danger: #b42318;
  --ui-radius-card: 8px;
  --ui-radius-control: 7px;
  --ui-elevation: 0 8px 24px rgba(24, 39, 58, .07);
  --ui-transition: 160ms ease;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #11151c;
  --ui-surface: #181e27;
  --ui-surface-soft: #202833;
  --ui-surface-strong: #252f3b;
  --ui-text: #eef3f8;
  --ui-muted: #b0bdcb;
  --ui-subtle: #91a0b0;
  --ui-border: #2c3744;
  --ui-border-strong: #435264;
  --ui-primary: #eaf2fb;
  --ui-on-primary: #11151c;
  --ui-accent: #63c5ed;
  --ui-focus: #75d0f3;
  --ui-positive: #70d0a2;
  --ui-warning: #f0c266;
  --ui-danger: #ff8e88;
  --ui-elevation: 0 10px 28px rgba(0, 0, 0, .24);
}
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}