/* ==========================================================================
   tokens.css —— 设计令牌层
   主题切换：给 <html> 加 data-theme="paper"（默认）/ "night" / "slate"
   所有颜色、字阶、间距都从这里取值，页面与组件不硬编码色值。
   ========================================================================== */

:root {
  /* ---- 字体 ------------------------------------------------ */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-body: "Noto Sans SC", "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;

  /* ---- 字阶（模块化 1.22 比例，移动端自动收缩） -------------- */
  --fs-xs: 0.8125rem;   /* 13px 标签 */
  --fs-sm: 0.9375rem;   /* 15px 辅助 */
  --fs-base: 1.0625rem; /* 17px 正文 */
  --fs-lg: 1.25rem;     /* 20px 小标题 */
  --fs-xl: 1.625rem;    /* 26px 区块标题 */
  --fs-2xl: clamp(1.875rem, 3.2vw, 2.375rem);
  --fs-3xl: clamp(2.125rem, 4.2vw, 3.125rem);
  --fs-4xl: clamp(2.5rem, 5.8vw, 4.5rem);

  /* ---- 间距梯度 -------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* ---- 圆角 ------------------------------------------------ */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---- 动效 ------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* ---- 布局 ------------------------------------------------ */
  --wrap: 1180px;
  --header-h: 72px;
}

/* ==========================================================================
   方案 A · paper（默认）—— 米白纸感 + 深墨绿 + WhatsApp 亮绿
   ========================================================================== */
:root,
[data-theme="paper"] {
  color-scheme: light;

  --paper: #f6f3ec;
  --paper-2: #fffdf8;
  --paper-3: #ece7dc;

  --ink: #12211d;      /* 正文（暖近黑） */
  --ink-2: #41524c;    /* 次级文字 */
  --ink-3: #5f706a;    /* 弱化文字（对纸底 5.1:1） */

  --forest: #0c3b33;   /* 主色：深墨绿 */
  --forest-2: #125046;
  --forest-soft: #e3ebe5;

  --leaf: #25d366;     /* 强调色：只给关键动作 */
  --leaf-ink: #07301a; /* 亮绿底上的文字 */

  --line: rgba(12, 59, 51, 0.13);
  --line-2: rgba(12, 59, 51, 0.26);

  --shadow-1: 0 2px 8px rgba(12, 45, 38, 0.06);
  --shadow-2: 0 10px 30px rgba(12, 45, 38, 0.09);
  --shadow-3: 0 26px 70px rgba(12, 45, 38, 0.14);

  --grain: 0.045;
  --mesh-a: rgba(37, 211, 102, 0.16);
  --mesh-b: rgba(18, 80, 70, 0.14);

  --glass: rgba(246, 243, 236, 0.84);
  --footer-bg: #0c3b33;
  --footer-ink: #eaf2ec;
  --footer-ink-2: #a9c2b6;
  --footer-line: rgba(234, 242, 236, 0.16);
}

/* ==========================================================================
   方案 B · night —— 深绿夜场，亮绿作为唯一光源
   ========================================================================== */
[data-theme="night"] {
  color-scheme: dark;

  --paper: #07130f;
  --paper-2: #0d1c17;
  --paper-3: #102420;

  --ink: #eef5f0;
  --ink-2: #b7c8bf;
  --ink-3: #90a49a;

  --forest: #25d366;
  --forest-2: #4ade80;
  --forest-soft: #10291f;

  --leaf: #25d366;
  --leaf-ink: #062915;

  --line: rgba(238, 245, 240, 0.14);
  --line-2: rgba(238, 245, 240, 0.3);

  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 26px 70px rgba(0, 0, 0, 0.6);

  --grain: 0.07;
  --mesh-a: rgba(37, 211, 102, 0.2);
  --mesh-b: rgba(20, 120, 90, 0.22);

  --glass: rgba(7, 19, 15, 0.82);
  --footer-bg: #050f0c;
  --footer-ink: #e8f3ed;
  --footer-ink-2: #9fb5a9;
  --footer-line: rgba(232, 243, 237, 0.14);
}

/* ==========================================================================
   方案 C · slate —— 中性灰绿，偏商务克制
   ========================================================================== */
[data-theme="slate"] {
  color-scheme: light;

  --paper: #f2f5f4;
  --paper-2: #ffffff;
  --paper-3: #e4eae8;

  --ink: #16211f;
  --ink-2: #485854;
  --ink-3: #63736e;

  --forest: #128c7e;
  --forest-2: #0f7a6d;
  --forest-soft: #dcefeb;

  --leaf: #25d366;
  --leaf-ink: #07301a;

  --line: rgba(18, 40, 36, 0.12);
  --line-2: rgba(18, 40, 36, 0.24);

  --shadow-1: 0 2px 8px rgba(18, 40, 36, 0.05);
  --shadow-2: 0 10px 30px rgba(18, 40, 36, 0.08);
  --shadow-3: 0 26px 70px rgba(18, 40, 36, 0.12);

  --grain: 0.035;
  --mesh-a: rgba(18, 140, 126, 0.12);
  --mesh-b: rgba(37, 211, 102, 0.1);

  --glass: rgba(242, 245, 244, 0.86);
  --footer-bg: #0e2622;
  --footer-ink: #e8f1ee;
  --footer-ink-2: #a4bab3;
  --footer-line: rgba(232, 241, 238, 0.16);
}