/* ============================================================
   夜色星尘 · 设计系统令牌（design tokens）
   用途：站点前端视觉统一的可复用设计系统（CSS 自定义属性层）
   参考规范：
   - pbakaus/impeccable —— 反模式清单（禁紫蓝渐变/禁纯白卡片嵌套/禁重投影/禁弹跳缓动/禁无阶梯字体）
   - Leonxlnx/taste-skill —— 反"AI 味"设计，强调布局/字体/动效的克制与性格
   使用：页面 <link rel="stylesheet" href="../_template/css/tokens.css">
       后接页面级 <style> 实现具体场景（hero/卡片/条形图等）
   说明：令牌即设计系统，页面样式一律从令牌取值，不再写裸色值/裸字号。
   ============================================================ */
:root {
  /* ========== 色彩：深夜底 + 月辉金 + 星尘暖白 ========== */
  --bg-deep: #080d1a;            /* 最深夜空 */
  --bg: #0b1120;                 /* 页面底色（tinted，永不纯黑） */
  --surface: #121a2c;            /* 面板 */
  --surface-2: #182238;          /* 更高层级面板 / 输入底 */
  --line: #23304d;               /* 细分隔线 */
  --line-strong: #33456b;        /* 强分隔 / 描边 */
  --moon: #fbbf24;               /* 主强调：月辉金（按钮 / 进度 / 重点） */
  --moon-deep: #d97706;          /* 月金加深（hover） */
  --moon-soft: rgba(251, 191, 36, .14);   /* 月金弱底 */
  --star: #f8fafc;               /* 标题星白 */
  --text: #e2e8f0;               /* 正文 */
  --text-sub: #94a3b8;           /* 次级文字 */
  --text-faint: #5b6b85;         /* 弱文字 / 占位 */
  --mint: #34d399;               /* 次强调：状态 / 成功 */
  --mint-soft: rgba(52, 211, 153, .12);
  --rose: #fb7185;               /* 警示 */
  --rose-soft: rgba(251, 113, 133, .12);

  /* ========== 字体 ========== */
  --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  /* 字号阶梯（严格落点，不随机取数） */
  --fs-11: .6875rem;   /* 小标签 / eyebrow */
  --fs-12: .75rem;     /* meta / 辅助 */
  --fs-13: .8125rem;   /* 次要 UI 文字 */
  --fs-14: .875rem;    /* 密集正文 / 控件 */
  --fs-15: .9375rem;   /* 长文次级 */
  --fs-16: 1rem;       /* 默认正文 */
  --fs-18: 1.125rem;   /* 引导段 / 卡片标题 */
  --fs-20: 1.25rem;    /* 区块标题 */
  --fs-24: 1.5rem;     /* 小节标题 */
  --fs-28: 1.75rem;    /* 章节标题 */
  --fs-32: 2rem;       /* 大章节标题 */
  --fs-40: 2.5rem;     /* 展示级 */
  /* 行高 */
  --lh-body: 1.8;
  --lh-head: 1.25;
  --lh-tight: 1.05;

  /* ========== 间距（8px 基数） ========== */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 80px;

  /* ========== 圆角（克制，不做胶囊滥用） ========== */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ========== 动效（禁弹跳缓动） ========== */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;

  /* ========== 排版工具 ========== */
  --track-wide: .08em;    /* 常规字距 */
  --track-label: .16em;   /* eyebrow 标签字距 */
}

/* ========== 基础层（随令牌自动生效，页面无需重复） ========== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--star); line-height: var(--lh-head); margin: 0; }
p { margin: 0; }
a { color: var(--moon); }
button { font-family: var(--font-body); cursor: pointer; }
::selection { background: var(--moon-soft); color: var(--star); }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }

/* 星空点缀：页面级添加 1-2 个径向光点（夜晚氛围） */
.star-dots {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 82% 12%, rgba(248,250,252,.5), transparent 100%),
    radial-gradient(1px 1px at 28% 22%, rgba(248,250,252,.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 68%, rgba(248,250,252,.4), transparent 100%),
    radial-gradient(1px 1px at 12% 78%, rgba(248,250,252,.3), transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 52%, rgba(248,250,252,.3), transparent 100%);
}
.moon-glow {
  position: fixed; top: -140px; right: -120px; width: 380px; height: 380px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(251,191,36,.10), transparent 68%);
}

/* 面板：细描边 + 弱底，禁重投影 */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

/* 主按钮：月金实底 + 深色字（禁渐变胶囊） */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--moon); color: var(--bg-deep);
  font-weight: 800; font-size: var(--fs-16);
  padding: 13px 34px; border: none; border-radius: var(--r-md);
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1);
}
.btn-primary:hover { background: #fcd34d; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* 次按钮：透明底 + 月金描边 */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--moon);
  font-weight: 600; font-size: var(--fs-14);
  padding: 11px 26px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color var(--dur-1), background var(--dur-1);
}
.btn-secondary:hover { border-color: var(--moon); background: var(--moon-soft); }

/* 标签：小圆角 outline chip */
.chip {
  display: inline-flex; align-items: center;
  background: var(--moon-soft); color: var(--moon);
  border: 1px solid rgba(251,191,36,.35);
  font-size: var(--fs-13); font-weight: 600;
  padding: 4px 12px; border-radius: var(--r-pill);
}

/* eyebrow 小标题（宽字距） */
.eyebrow {
  font-size: var(--fs-11); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-faint); font-weight: 600;
}