/**
 * 齐论 AI 统一网页视觉与交互基础层
 * Standard: V1.1 / 2026-09-27
 * Keep product-specific semantic tokens mapped to these primitives.
 */
:root {
  --ql-red: #9b0000;
  --ql-red-dark: #7d1316;
  --ql-highlight: #fd8770;
  --ql-ink: #1f1b1a;
  --ql-black: #0b0b0b;
  --ql-gray-50: #f7f7f7;
  --ql-gray-200: #e5e5e5;
  --ql-gray-500: #969595;
  --ql-gray-700: #4a4a4a;
  --ql-white: #fff;

  --ql-space-1: 4px;
  --ql-space-2: 8px;
  --ql-space-3: 12px;
  --ql-space-4: 16px;
  --ql-space-6: 24px;
  --ql-space-8: 32px;
  --ql-space-12: 48px;
  --ql-space-16: 64px;

  --ql-radius-sm: 4px;
  --ql-radius-control: 8px;
  --ql-radius-card: 12px;
  --ql-radius-lg: 16px;

  --ql-content-max: 1280px;
  --ql-reading-max: 760px;
  --ql-nav-height: 72px;
  --ql-control-height: 44px;
  --ql-motion-fast: 160ms;
  --ql-motion-base: 240ms;

  --ql-font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ql-focus-ring: 0 0 0 3px rgb(155 0 0 / 18%);
}

.ql-global-nav {
  min-height: var(--ql-nav-height);
  background: var(--ql-white);
  border-bottom: 1px solid var(--ql-gray-200);
}

.ql-content {
  width: min(calc(100% - 32px), var(--ql-content-max));
  margin-inline: auto;
}

.ql-card {
  border: 1px solid var(--ql-gray-200);
  border-radius: var(--ql-radius-card);
  background: var(--ql-white);
  box-shadow: none;
}

.ql-control {
  min-height: var(--ql-control-height);
  border-radius: var(--ql-radius-control);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ql-red);
  outline-offset: 2px;
}

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