/* tokens.css — 小多绘本 V2 设计变量（绘本插画风）
 * 所有页面样式只允许引用本文件的 CSS 变量，禁止硬编码颜色。
 */
:root {
  /* ===== 色板 · 绘本纸质感 ===== */
  --paper: #FFF8EC;        /* 页面背景 · 奶油纸色 */
  --card: #FFFFFF;         /* 卡片表面 */
  --coral: #E8632E;        /* 主色 · 珊瑚橙 */
  --coral-dark: #C24E1E;
  --coral-light: #FFE9DA;
  --leaf: #3E9B6E;         /* 辅助 · 森林绿 */
  --leaf-light: #E6F7EE;
  --sun: #F4A259;          /* 辅助 · 鹅黄（小恐龙身体） */
  --sun-light: #FFF3E0;
  --sky: #2E86A6;          /* 辅助 · 天空蓝 */
  --sky-light: #E8F6FB;
  --berry: #D95D5D;        /* 辅助 · 浆果红 */
  --berry-light: #FFECEC;
  --ink: #3B2F27;          /* 文字 · 深棕（绘本印刷墨色） */
  --muted: #8A7B6E;        /* 次级文字 */
  --line: #EFE5D9;         /* 描边 · 手绘感浅棕 */

  /* ===== 家长模式 · 简约冷灰 ===== */
  --grownup: #56697C;
  --grownup-dark: #3E4E5E;
  --grownup-light: #EAEFF2;

  /* ===== 字体 ===== */
  --font-display: 'Baloo 2', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;

  /* ===== 圆角 · 阴影 ===== */
  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 14px;
  --radius-xs: 9px;
  --pill: 999px;
  --shadow: 0 6px 18px rgba(232, 99, 46, 0.14);
  --shadow-lg: 0 12px 30px rgba(232, 99, 46, 0.2);
  --shadow-flat: 0 2px 10px rgba(59, 47, 39, 0.08);
  --shadow-soft: 0 4px 14px rgba(59, 47, 39, 0.06);

  /* ===== 文字层级（孩子页 · 大字号） ===== */
  --fs-hero: clamp(26px, 6vw, 34px);
  --fs-title: clamp(20px, 4.6vw, 24px);
  --fs-subtitle: clamp(16px, 3.6vw, 18px);
  --fs-body: clamp(15px, 3.4vw, 17px);
  --fs-small: 14px;
  --fs-tiny: 12.5px;
  --lh-tight: 1.25;
  --lh-body: 1.6;

  /* ===== 间距 ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ===== 动效 ===== */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --press-scale: scale(0.94);

  /* ===== 尺寸 ===== */
  --header-h: 56px;
  --footer-h: 84px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== 降级：无 Baloo 2 时用系统圆体 ===== */
@supports not (font-variation-settings: normal) {
  :root { --font-display: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(244, 162, 89, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(46, 134, 166, 0.07) 0%, transparent 50%);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}

button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
button:active {
  transform: scale(0.96);
  opacity: 0.92;
}