/* ==========================================================================
   tokens.css — 设计令牌（全站唯一来源）
   颜色取自 Ardot 设计稿「EasyBangumi 官网重设计」，对比度按 WCAG AA 校正：
   - 原稿 --text-faint 用的 #6E7292 / #565A78 在深底上只有 4.2 / 3.0，
     正文级不达标，提亮为 #7E83A3（5.3:1）后全站收敛成一支。
   - 原稿按钮底色 #4A86E8 上的白字只有 3.58:1，故拆成三支：
     --brand 只做填充（白字 4.76:1）、--brand-bright 只做图形与描边、
     --brand-ink 只做深底上的文字。
   ========================================================================== */

:root {
  /* ---- 画布 / 表面 ---- */
  --bg: #0a0a14;
  --bg-deep: #07070f;
  --surface: #12121f;
  --surface-2: #0f0f1f;
  --surface-3: #101528;
  --surface-4: #16161f;
  --surface-5: #1c1c26;
  --frame: #05050c;

  --line-faint: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-solid: rgba(255, 255, 255, 0.2);

  /* ---- 文字（深底三级，全部 ≥4.5:1） ---- */
  --text: #e8e8f5;
  --text-body: #c7cadf;
  --text-muted: #a9aecb;
  --text-dim: #8e93b4;
  --text-faint: #7e83a3;
  --text-invert: #ffffff;

  /* ---- 品牌 ---- */
  --brand: #3b6fd4;
  --brand-hover: #3565c6;
  --brand-bright: #4a86e8;
  --brand-ink: #7fa8f2;
  --brand-surface: #1b2a4a;
  --brand-glow: rgba(74, 134, 232, 0.45);

  /* ---- 点缀 ---- */
  --pink: #ff77b0;
  --pink-surface: #3a1f30;
  --pink-line: rgba(255, 0, 110, 0.32);
  --gold: #ffd700;
  --gold-surface: #3a3320;
  --gold-line: rgba(255, 215, 0, 0.3);

  /* ---- 字体 ---- */
  --font: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- 字号 ---- */
  --fz-hero: 78px;
  --fz-h1: 48px;
  --fz-h2: 44px;
  --fz-h3: 32px;
  --fz-h4: 26px;
  --fz-lead: 20px;
  --fz-sub: 18px;
  --fz-card: 19px;
  --fz-body: 16px;
  --fz-sm: 15px;
  --fz-xs: 14px;
  --fz-2xs: 13px;

  /* ---- 行高 ---- */
  --lh-tight: 1.18;
  --lh-heading: 1.32;
  --lh-body: 1.68;
  --lh-loose: 1.9;

  /* ---- 间距 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 72px;
  --sp-12: 88px;
  --sp-13: 96px;

  /* ---- 圆角 ---- */
  --r-xs: 9px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-3xl: 32px;
  --r-phone: 38px;
  --r-phone-lg: 40px;
  --r-pill: 100px;

  /* ---- 宽度（全站只此两档） ---- */
  --w-container: 1200px;
  --w-prose: 820px;
  --gutter: 24px;

  /* ---- 区块节奏 ---- */
  --sec-y: 96px;
  --sec-y-sm: 40px;

  --ease: 0.18s ease;
}

/* 移动端整体降档：改这里，全站生效 */
@media (max-width: 860px) {
  :root {
    --fz-hero: 44px;
    --fz-h1: 34px;
    --fz-h2: 30px;
    --fz-h3: 24px;
    --fz-h4: 21px;
    --fz-lead: 17px;
    --fz-sub: 16px;
    --fz-card: 18px;
    --sec-y: 64px;
    --sec-y-sm: 32px;
    --gutter: 20px;
  }
}

@media (max-width: 520px) {
  :root {
    --fz-hero: 36px;
    --fz-h1: 28px;
    --fz-h2: 26px;
    --fz-h3: 21px;
    --fz-h4: 19px;
    --fz-card: 17px;
    --gutter: 18px;
  }
}