/* ==========================================================================
   设计令牌 Design Tokens
   规则：所有颜色/圆角/阴影/间距/**布局尺寸**统一在此定义，页面样式只引用变量。
   ========================================================================== */

:root {
  /* 颜色 · 中性 */
  --color-bg: #ffffff;
  --color-bg-soft: #f6f7f9;
  --color-bg-card: #ffffff;
  --color-text: #1f2328;
  --color-text-2: #5f6b7a;
  --color-text-3: #8a94a3;
  --color-border: #e5e8ec;

  /* 颜色 · 品牌 */
  --color-primary: #3b77d9;
  --color-primary-soft: #eaf1fb;
  --color-primary-hover: #2f66be;
  --color-primary-active: #29589f;
  --color-on-primary: #ffffff;

  /*
   * 颜色 · 品牌渐变（Logo 标识专用）
   * 蓝紫对角渐变，仅用于 .logo-mark 与 favicon，
   * 不参与正文、按钮配色，避免与 --color-primary 的语义混淆。
   */
  --color-brand-grad-start: #4f6ef7;
  --color-brand-grad-end: #8b5cf6;

  /* 颜色 · 禁用态 */
  --color-disabled-bg: #e8ebf0;
  --color-disabled-text: #a2aab6;
  --color-disabled-border: #e0e4ea;

  /* 颜色 · 状态 */
  --color-warn: #c2702a;
  --color-warn-soft: #fbf1e6;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 99px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(20, 30, 50, .04);
  --shadow-md: 0 1px 2px rgba(20, 30, 50, .04), 0 8px 24px rgba(20, 30, 50, .06);
  --shadow-btn-hover: 0 2px 6px rgba(59, 119, 217, .28);
  --shadow-toast: 0 4px 16px rgba(0, 0, 0, .2);

  /* 字体 */
  --font-family-base: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  /*
   * 字号刻度：以中文可读性为准。
   * 正文 18px（接近中文长段落舒适上限）；xs/sm 只用于标签、版权等辅助信息，
   * 不承载介绍性正文（介绍文字最低使用 --font-size-lead / base）。
   * 排版改用 --font-size-* token 后，可直接用根字号整体缩放。
   */
  --font-size-xs: 15px;
  --font-size-sm: 17px;
  --font-size-base: 18px;
  --font-size-md: 19px;
  --font-size-lg: 21px;
  --font-size-lead: 20px;
  --font-size-title: 32px;
  --font-size-h1: clamp(36px, 5.4vw, 58px);
  --font-size-h1-sub: clamp(34px, 4.8vw, 50px);
  --line-height-base: 1.8;
  --line-height-relaxed: 1.9;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;

  /* 布局 */
  --container-max: 1300px;
  --container-pad: 32px;
  --header-height: 72px;

  /* 层级 */
  --z-header: 50;
  --z-menu: 45;
  --z-toast: 9999;
  --z-modal: 1000;

  /* 动效 */
  --transition-fast: .2s;
  --transition-base: .25s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1115;
    --color-bg-soft: #161922;
    --color-bg-card: #1a1d26;
    --color-text: #e6e8eb;
    --color-text-2: #9aa3af;
    --color-text-3: #6b7480;
    --color-border: #262b36;

    --color-primary: #6ea3ee;
    --color-primary-soft: #1e2a3d;
    --color-primary-hover: #8ab6f2;
    --color-primary-active: #5b8ed4;

    --color-disabled-bg: #232833;
    --color-disabled-text: #5f6875;
    --color-disabled-border: #2c323d;

    --color-warn: #d8925a;
    --color-warn-soft: #2e2418;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-toast: 0 4px 16px rgba(0, 0, 0, .4);
  }
}