/* 墨墨小屋 · 设计令牌（DESIGN.md §1.1 / §1.2）
 * 全站颜色、圆角、阴影、字体只允许引用这里的变量；派生色一律用 color-mix() 从令牌算出，不另起新色。
 */

/* ---------- 字体（本地 vendor，font-display: swap；url() 相对本文件 styles/ 目录） ---------- */

/* 标题 / 数字 / 按钮：活泼的站酷快乐体 */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  src: url('../../vendor/fonts/ZCOOLKuaiLe-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 书法感点缀（logo「墨墨小屋」等少量使用）：马善政毛笔楷书 */
@font-face {
  font-family: 'Ma Shan Zheng';
  src: url('../../vendor/fonts/MaShanZheng-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 汉字（题目 / 正确字 / 字库 / 笼子）：霞鹜文楷 GB 子集（OFL，国标楷体字形；tools/subset-font.sh 生成，
 * GB2312 全部汉字 + 常用标点 + ASCII，约 1.5MB）。iPad 没有系统楷体，走之底等部件在苹方里是印刷体写法，所以必须自带文件；
 * 系统楷体只作为文件未加载完成前的回退（DESIGN.md §10）。 */
@font-face {
  font-family: 'LXGW WenKai GB';
  src: url('../../vendor/fonts/LXGWWenKaiGB-sub.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- 天空（按时段渐变） ---------- */
  --sky-day-top: #bfe0f2;
  --sky-day-bottom: #f6efe0;
  --sky-dusk-top: #8e93c6;
  --sky-dusk-bottom: #f9c9a1;
  --sky-night-top: #1b2542;
  --sky-night-bottom: #3c4b70;

  /* ---------- 大地 ---------- */
  --hill-far: #a7c8b7;
  --hill-mid: #8dbb7a;
  --hill-near: #6fa35c;
  --grass: #5e8f4e;
  --wood: #c08f5f;
  --wood-dark: #8a5a3c;

  /* ---------- 纸与墨 ---------- */
  --paper: #fbf6ea;
  --paper-2: #f3ebd8;
  --ink: #2b2b33;
  --ink-soft: #5a5a66;

  /* ---------- 强调 ---------- */
  --gold: #f2b632;
  --gold-2: #ffd86b;
  --coral: #e8735a;
  --sky-accent: #79b8d1;
  --wisteria: #9b8ccf;

  /* ---------- 判定（错也是柔和的珊瑚红） ---------- */
  --ok: #5cae6a;
  --warn: #e3a63b;
  --bad: #d9776b;

  /* ---------- 语义色的文字版（WCAG AA） ----------
   * 上面的 --ok / --coral / --gold / --wisteria / --bad 是色块色（妖怪体色、进度条、灯笼、火苗、山丘），落在纸色上只有
   * 2.5–2.9:1，直接当文字色读不清。凡是文字 / 数字一律用这一组，不再拿色块色写字：
   *   *-text ≥ 4.5:1（纸 #fbf6ea 上实测；正文、小数字、按钮里的字）＝ 本色掺 35–55% 墨；
   *   *-num  ≥ 3:1（只给 ≥ 34px 的大数字，保留更多本色）＝ 本色掺 15–40% 墨。
   * 数值固定写死（不用 color-mix 派生），对比度才可复核。 */
  --ok-text: #487a54;        /* 4.65 */
  --coral-text: #a65a4c;     /* 4.65 */
  --gold-text: #856a33;      /* 4.74 */
  --wisteria-text: #746a98;  /* 4.57 */
  --bad-text: #9c5c57;       /* 4.77 */
  --warn-text: #876837;      /* 4.78（纯 --warn 在纸上只有 1.9） */
  --ok-num: #559a62;         /* 3.15 */
  --coral-num: #cc6854;      /* 3.43 */
  --gold-num: #a27e32;       /* 3.50 */
  --wisteria-num: #8a7db8;   /* 3.40 */
  /* 主按钮底色：纯珊瑚上的白字只有 2.99:1，掺 10% 墨后 3.44:1（按钮字 ≥ 18px 快乐体，按大字算） */
  --coral-deep: #d56c56;

  /* ---------- 形状 ---------- */
  --shadow: 0 10px 30px rgba(60, 50, 30, .12);
  --shadow-soft: 0 4px 12px rgba(60, 50, 30, .10);
  --radius: 18px;
  --radius-lg: 28px;
  --card-stroke: rgba(120, 90, 50, .12);

  /* ---------- 字体栈（§1.2） ---------- */
  --font-display: 'ZCOOL KuaiLe', 'PingFang SC', sans-serif;
  --font-brush: 'Ma Shan Zheng', 'Kaiti SC', serif;
  --font-kai: 'LXGW WenKai GB', 'Kaiti SC', 'STKaiti', 'KaiTi', serif;
  --font-body: 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif;
  /* 口算题面 / 答案回显：圆润无衬线，0 不带斜杠、1 带小旗、6/9 尾巴清楚；iPad 上 ui-rounded = SF Pro Rounded（MATH-4 §1.4） */
  --font-math: ui-rounded, 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif;

  /* ---------- 动效（§1.4） ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in: ease-in;
  --dur-micro: 160ms;   /* 微反馈 120–200ms */
  --dur-card: 280ms;    /* 卡片进出 260–320ms */
  --dur-exit: 150ms;    /* 退出 */
  --dur-cheer: 700ms;   /* 庆祝 600–900ms */

  /* ---------- 层级（bg 0 → 场景 → 墨墨 → fx 覆盖层 → 弹窗 → 提示条） ---------- */
  --z-bg: 0;
  --z-scene: 1;
  --z-mascot: 5;
  --z-fx: 50;
  --z-modal: 100;
  --z-toast: 110;

  /* ---------- 纸面噪点：feTurbulence 生成的暖色细颗粒，alpha ≤ .05，平铺在卡片底色上 ---------- */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .08  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}