:root {
  --ref-bg: #f5f7fc;
  --ref-bg-cool: #f1f4ff;
  --ref-surface: #ffffff;
  --ref-surface-soft: #fbfcff;
  --ref-text: #17181c;
  --ref-text-secondary: #666b78;
  --ref-text-tertiary: #9297a5;
  --ref-line: #e5e8f1;
  --ref-line-strong: #d8ddea;
  --ref-blue: #5574f7;
  --ref-blue-hover: #4868ed;
  --ref-blue-soft: #eef2ff;
  --ref-purple: #7658f6;
  --ref-mint: #42dcb6;
  --ref-success: #28b874;
  --ref-success-soft: rgba(40, 184, 116, 0.1);
  --ref-danger: #ef4e5e;
  --ref-danger-soft: rgba(239, 78, 94, 0.08);
  --ref-warning: #f5a524;
  --ref-warning-soft: rgba(245, 165, 36, 0.11);
  --ref-nav-dark: #171822;
  --ref-nav-dark-soft: #232532;
  --ref-radius-control: 8px;
  --ref-radius-card: 14px;
  --ref-radius-panel: 18px;
  --ref-shadow-card: 0 10px 35px rgba(82, 97, 160, 0.06);
  --ref-shadow-panel: 0 18px 55px rgba(82, 97, 160, 0.08);
  --ref-font:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "PingFang SC",
    "Microsoft YaHei",
    "Helvetica Neue",
    Arial,
    sans-serif;

  /* Compatibility aliases used by the two existing visual override layers. */
  --ui-bg: var(--ref-bg);
  --ui-surface: var(--ref-surface);
  --ui-surface-soft: var(--ref-surface-soft);
  --ui-surface-hover: #f0f3fb;
  --ui-text: var(--ref-text);
  --ui-text-secondary: var(--ref-text-secondary);
  --ui-text-tertiary: var(--ref-text-tertiary);
  --ui-separator: var(--ref-line);
  --ui-separator-strong: var(--ref-line-strong);
  --ui-nav: var(--ref-nav-dark);
  --ui-nav-text: #f7f8fc;
  --ui-nav-muted: #a9acba;
  --ui-accent: var(--ref-blue);
  --ui-accent-hover: var(--ref-blue-hover);
  --ui-accent-soft: var(--ref-blue-soft);
  --ui-success: var(--ref-success);
  --ui-success-soft: var(--ref-success-soft);
  --ui-warning: var(--ref-warning);
  --ui-warning-soft: var(--ref-warning-soft);
  --ui-danger: var(--ref-danger);
  --ui-danger-soft: var(--ref-danger-soft);
  --ui-font: var(--ref-font);
  --ui-shadow-sm: var(--ref-shadow-card);
  --ui-shadow-md: var(--ref-shadow-panel);
}

html {
  font-family: var(--ref-font);
  color: var(--ref-text);
  background: var(--ref-bg);
}

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

:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid rgba(85, 116, 247, 0.3);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}