/* =========================================================
 * 设计 Tokens — 共享基础（4 项目通用）
 * 开发三典设计规范 v1.0
 * 创建日期：2026-07-16
 * 用途：所有项目的根级 CSS 变量，主题色由各项目单独覆盖
 * ========================================================= */

/* ---------- 1. 米色基础（4 项目统一底色） ---------- */
:root {
  /* 页面底色（米色亚麻 / 羊皮纸 / 宣纸） */
  --bg-page: #faf6ed;

  /* 卡片底色（更浅米） */
  --bg-card: rgba(255,255,255,0.75);

  /* 副卡片底色 */
  --bg-card-2: #F5EFE0;

  /* 标本卡（带暗角的特殊卡片） */
  --bg-specimen: #FAF5E8;

  /* 浮层/弹窗底 */
  --bg-overlay: rgba(44, 53, 37, 0.4);

  /* 分隔线 */
  --divider: #E5DCC8;

  /* 描边 */
  --border: #e0d6c0;
  --border-soft: #E8DFC8;
  --border-strong: #B5A988;
}

/* ---------- 2. 中性色（文字 / 图标） ---------- */
:root {
  /* 主文字（深墨绿/墨黑 通用） */
  --text-primary: #2e2b24;
  --text-primary-dark: #1A1F14;

  /* 副文字 */
  --text-secondary: #7d7566;

  /* 提示文字 */
  --text-muted: #9A9685;

  /* 占位/禁用 */
  --text-disabled: #B8B0A0;

  /* 反色文字（深底上用） */
  --text-on-dark: #F5F1E8;

  /* 图标色（默认） */
  --icon: #2C3525;
  --icon-muted: #9A9685;
}

/* ---------- 3. 状态色（4 项目统一） ---------- */
:root {
  --color-success: #5a6b3a;   /* 正确/通过（绿） */
  --color-success-bg: #EDF0E5;
  --color-danger: #a04a3a;    /* 错误（红） */
  --color-danger-bg: #F5E5E3;
  --color-warning: #c9a35c;   /* 警告（橘） */
  --color-warning-bg: #F5EBDD;
  --color-info: #6B6B5C;      /* 信息（灰） */
  --color-info-bg: #EFEBE0;
}

/* ---------- 4. 字体栈（4 项目各自定义） ---------- */
:root {
  /* 中文衬线（标本/航海 标题） */
  --font-serif-cn: "Source Han Serif SC", "Noto Serif SC",
                   "Songti SC", "STSong", "SimSun", serif;

  /* 英文衬线（标本/航海 大字） */
  --font-serif-en: "Georgia", "Source Serif Pro",
                   "Playfair Display", serif;

  /* 中文楷体（墨卷 标题） */
  --font-kaiti-cn: "Kaiti SC", "STKaiti", "KaiTi",
                   "BiauKai", "Noto Serif SC", serif;

  /* 无衬线（正文 / UI 默认） */
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, sans-serif;

  /* 等宽（代码 / 音标 / 数字） */
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code",
               "Consolas", monospace;

  /* 篆体（印章） */
  --font-zhuan: "Noto Serif CJK SC", "STZhongsong",
                "方正小篆体", serif;
}

/* ---------- 5. 字号梯度 ---------- */
:root {
  --fs-xxs: 11px;   /* Tab 文字 / 极小提示 */
  --fs-xs:  12px;   /* 副标签 / 时间 */
  --fs-sm:  13px;   /* 小正文 / 标签 */
  --fs-md:  14px;   /* 正文（默认） */
  --fs-lg:  15px;   /* 任务 / 列表 */
  --fs-xl:  16px;   /* 标题 / 按钮 */
  --fs-2xl: 18px;   /* 页面标题 */
  --fs-3xl: 20px;   /* 大标题 */
  --fs-4xl: 24px;   /* 卡片大标题 */
  --fs-5xl: 28px;   /* 数字大 */
  --fs-6xl: 32px;   /* 统计大数字 */
  --fs-7xl: 40px;   /* 单词/进度大 */
  --fs-8xl: 48px;   /* 番茄钟大 */
  --fs-9xl: 56px;   /* 巨号数字 */
}

/* ---------- 6. 字重 ---------- */
:root {
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* ---------- 7. 行高 ---------- */
:root {
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  --lh-loose: 2.0;
}

/* ---------- 8. 字间距 ---------- */
:root {
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;
}

/* ---------- 9. 间距（8 倍数） ---------- */
:root {
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;   /* 页面左右 padding */
  --sp-5:  20px;   /* 卡片内大 padding */
  --sp-6:  24px;   /* 区域间距 */
  --sp-7:  28px;
  --sp-8:  32px;   /* 大区块 */
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
}

/* ---------- 10. 圆角 ---------- */
:root {
  --r-none: 0;
  --r-sm:   8px;     /* 按钮、Tab */
  --r-md:   12px;    /* 评级按钮、卡片按钮 */
  --r-lg:   16px;    /* 主卡片 */
  --r-xl:   20px;    /* 标本卡、特殊卡 */
  --r-2xl:  24px;
  --r-3xl:  32px;    /* 大圆角 */
  --r-pill: 999px;   /* 徽章、Tag */
}

/* ---------- 11. 阴影 ---------- */
:root {
  --sh-none:  none;
  --sh-sm:    0 1px 2px rgba(60, 50, 30, 0.06);
  --sh-md:    0 4px 12px rgba(60, 50, 30, 0.08);
  --sh-lg:    0 8px 24px rgba(60, 50, 30, 0.12);
  --sh-xl:    0 16px 48px rgba(60, 50, 30, 0.16);
  --sh-inset: inset 0 0 24px rgba(60, 50, 30, 0.04);  /* 标本卡暗角 */
  --sh-inset-strong: inset 0 0 40px rgba(60, 50, 30, 0.08);
}

/* ---------- 12. 边框宽度 ---------- */
:root {
  --bw-0: 0;
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
}

/* ---------- 13. z-index 层级 ---------- */
:root {
  --z-base:    1;
  --z-elevated: 10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ---------- 14. 动效 ---------- */
:root {
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 500ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 15. 布局尺寸（iPhone 14 Pro 基准 393×852） ---------- */
:root {
  --viewport-w: 393px;
  --viewport-h: 852px;

  --topbar-h:  56px;   /* 顶部导航 */
  --tabbar-h:  64px;   /* 底部 Tab */
  --safe-top:  env(safe-area-inset-top, 0px);
  --safe-bot:  env(safe-area-inset-bottom, 0px);

  --content-max-w: 720px;   /* 内容最大宽度（PC 端） */
}