/* ============================================================
   tokens.css — [BRAND] 设计系统变量（Studio Ledger）
   06 design 真源 | 2026-10-31 | 下游 07/08 只读引用，不改数值
   字体：Fraunces + Archivo（SIL OFL 1.1，自托管 woff2，见 licenses.md）
   ============================================================ */
@import url('fonts.css');

:root {
  /* ---- Color：warm paper + ink + persimmon（反紫蓝白模板） ---- */
  --paper:        #FAF6EE;   /* 页面底色（暖纸） */
  --paper-2:      #F2EADB;   /* 分区底（浅账簿带） */
  --card:         #FFFDF8;   /* 卡面 */
  --ink:          #211E17;   /* 正文（对比度 ≈14:1 on paper） */
  --ink-2:        #57503F;   /* 次级文字 */
  --ink-3:        #6E644B;   /* 脚注/元信息（≥4.9:1，AA） */
  --line:         #E4D9C2;   /* 发丝线 */
  --line-2:       #C8B894;   /* 强调线/表头线 */
  --accent:       #A93B22;   /* 柿棕：主 CTA（白字 ≥4.5:1） */
  --accent-hover: #8F2F1B;   /* hover/active */
  --accent-tint:  #F6E8E1;   /* 我方列/强调底 */
  --forest:       #1F5A43;   /* 深绿：次强调/正向 */
  --forest-tint:  #E4EEE7;
  --amber:        #8A6100;   /* 提示/注意 */
  --amber-tint:   #F4E9D2;
  --error:        #9B2C2C;
  --error-tint:   #F7E4E1;
  --focus:        #B45309;   /* focus ring */

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --fs-h1:    clamp(2.25rem, 1.35rem + 2.9vw, 3.25rem);   /* 36→52px */
  --fs-h2:    clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem);  /* 26→34px */
  --fs-h3:    clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem); /* 18→22px */
  --fs-body:  1.0625rem;   /* 17px */
  --fs-small: 0.875rem;    /* 14px */
  --fs-fn:    0.8125rem;   /* 13px 脚注 */
  --lh-tight: 1.08;
  --lh-head:  1.15;
  --lh-body:  1.65;

  /* ---- Spacing（4px 基数） ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y:  var(--sp-9);
  --gutter:     var(--sp-5);

  /* ---- Layout ---- */
  --container:    1120px;
  --container-narrow: 720px;
  --measure:      68ch;
  --header-h:     64px;

  /* ---- Radius / Shadow / Border ---- */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 999px;
  --shadow-card: 0 1px 0 rgba(33, 30, 23, 0.06);
  --shadow-pop:  0 12px 32px rgba(33, 30, 23, 0.16);
  --border:      1px solid var(--line);
  --border-strong: 1px solid var(--line-2);
  --border-emphasis: 2px solid var(--ink);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur: 160ms;
}

@media (max-width: 768px) {
  :root {
    --section-y: var(--sp-7);
    --header-h: 56px;
    --fs-body: 1rem;
    --gutter: var(--sp-4);
  }
}