/* ============================================
 * tokens.css — 复古手作集锦册 设计系统
 * 集中管理颜色 / 字号 / 圆角 / 阴影 / 动效
 * ============================================ */

:root {
  /* === 色彩：纸张与墨水 === */
  --paper:        #F5EEDC;  /* 主背景：米黄纸张 */
  --paper-deep:   #EBE0C2;  /* 卡片底色 */
  --paper-soft:   #FAF4E5;  /* 输入框、画板底 */
  --ink:          #1F1A17;  /* 主文字：深墨 */
  --ink-soft:     #4A423B;  /* 次要文字 */
  --ink-faint:    #8B7F6E;  /* 提示、占位符 */
  --rule:         #C9B891;  /* 分割线：纸张纹路 */

  /* === 色彩：印章 / 强调 === */
  --stamp:        #D7413B;  /* 主强调：印章红 */
  --stamp-deep:   #A82F2A;  /* 红按压 */
  --sun:          #F2B441;  /* 次强调：阳光黄 */
  --sun-deep:     #C68A1E;
  --sprout:       #4F7942;  /* 第三色：草绿 */
  --sprout-deep:  #365530;
  --sky:          #5B7A99;  /* 链接/提示：远天蓝 */
  --sky-deep:     #3F5872;

  /* === 圆角 === */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* === 字体 === */
  --font-display: "Fraunces", "Noto Serif SC", Georgia, serif;
  --font-hand:    "Caveat", "Ma Shan Zheng", "Liu Jian Mao Cao", cursive;
  --font-ui:      system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* === 字号（限制 5 档）=== */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  --fs-3xl:  56px;

  /* === 阴影：纸面叠加 === */
  --shadow-paper:
    0 1px 0 rgba(31,26,23,.04),
    0 2px 6px rgba(31,26,23,.06),
    0 8px 24px rgba(31,26,23,.08);
  --shadow-stamp:
    0 2px 0 rgba(168,47,42,.35),
    0 4px 10px rgba(168,47,42,.25);
  --shadow-lift:
    0 1px 0 rgba(31,26,23,.04),
    0 6px 18px rgba(31,26,23,.12),
    0 20px 40px rgba(31,26,23,.10);

  /* === 间距（4 的倍数）=== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* === 动效曲线 === */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.7, 0, .84, 0);
  --dur-fast:    180ms;
  --dur-med:     320ms;
  --dur-slow:    600ms;

  /* === 布局 === */
  --max-w: 1200px;
  --nav-h: 64px;
}

/* 暗色模式（暂只切主背景） */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #1E1A14;
    --paper-deep: #25201A;
    --paper-soft: #2A241D;
    --ink:        #F5EEDC;
    --ink-soft:   #C9B891;
    --ink-faint:  #8B7F6E;
    --rule:       #3A322A;
    --stamp:      #E66B65;
  }
}