/* ==========================================================================
   tokens.css — 耳机图鉴 · 语义设计变量（唯一变量来源，三页共用）
   来源：03-ui/home-ui-desktop.png（dark-elegant）+ 03-ui/ui-spec.md
   ========================================================================== */
:root {
  /* ---- 底色：三档深藏青 ---- */
  --bg: #0d1824;
  --bg-deep: #080f18;
  --bg-soft: #111d2a;
  --card: #141f2c;
  --card-hi: #1a2836;

  /* ---- 强调：暖金（取自耳罩皮革与金属头梁） ---- */
  --gold: #d3aa7b;
  --gold-strong: #e6c193;
  --gold-dim: #a9855b;

  /* ---- 文字 ---- */
  --ink: #f7f1e4;
  --ink-soft: #d8d2bd;
  --muted: #9ba3ad;
  --dim: #6f7a88;

  /* ---- 描边与分隔 ---- */
  --line: rgba(211, 170, 123, 0.18);
  --line-strong: rgba(211, 170, 123, 0.42);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-soft-2: rgba(255, 255, 255, 0.12);
  --shade: rgba(13, 24, 36, 0.86);

  /* ---- 字体气质 ---- */
  --font-serif: 'Songti SC',SimSun,'Noto Serif SC',Georgia,serif;
  --font-sans: 'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", ui-monospace, monospace;

  /* ---- 字号阶梯 ---- */
  --fs-hero-eyebrow: clamp(32px, 4.2vw, 60px);
  --fs-hero: clamp(30px, 3.4vw, 50px);
  --fs-h2: clamp(24px, 2.8vw, 40px);
  --fs-h3: 18px;
  --fs-lede: 16px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-tiny: 12px;

  /* ---- 间距节奏（4/8 基准） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 60px;

  /* ---- 容器与圆角 ---- */
  --container: 1328px;
  --gutter: 24px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --pill: 999px;

  /* ---- 阴影与遮罩 ---- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.25);
  --hero-veil: linear-gradient(90deg, var(--bg) 0%, rgba(13, 24, 36, 0.96) 32%, rgba(13, 24, 36, 0.6) 55%, rgba(13, 24, 36, 0.1) 76%, rgba(13, 24, 36, 0.3) 100%);

  /* ---- 首页分区高度预算（1440 基准，来源 03-ui/compare-log.md） ---- */
  --h-header: 84px;
  --h-hero: 330px;
  --h-categories: 306px;
  --h-buying: 268px;
  --h-featured: 292px;
  --h-driver: 236px;
  --h-fit: 292px;
  --h-notes: 168px;
  --h-footer: 184px;
}