/* 设计变量。规格见 docs/spec-kol-compare-ui.md 第 1 节。
   对比度已按 WCAG AA 校过：正文对底色约 14:1，弱化文字约 4.7:1。 */
:root {
  --color-bg-primary: #0f1216;
  --color-bg-secondary: #171c22;
  --color-bg-tertiary: #1e242c;
  --color-bg-elevated: #232a33;

  --color-text-primary: #e9edf2;
  --color-text-secondary: #a8b3c0;
  --color-text-muted: #8a95a2;

  --color-border-default: #2b333d;
  --color-border-subtle: #222932;

  --color-accent: #ff6a4d;
  --color-accent-hover: #ff8168;
  --color-accent-subtle: rgba(255, 106, 77, 0.14);

  --color-success: #4cc38a;
  --color-success-subtle: rgba(76, 195, 138, 0.15);
  --color-warning: #e0a020;
  --color-warning-subtle: rgba(224, 160, 32, 0.15);
  --color-danger: #f2705c;
  --color-danger-subtle: rgba(242, 112, 92, 0.15);
  --color-info: #5aa9e6;
  --color-info-subtle: rgba(90, 169, 230, 0.14);

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 30px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 767px) {
  :root {
    --text-base: 16px;
    --text-sm: 14px;
  }
}

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