/* GuoKu 设计令牌（design/K1-Spec）。色值和 palette.js 一一对应，改一处要两处一起改（pkg-ui.test.js 会核对）。
   牌桌上的词卡：深色牌桌，一个玩件一张彩色卡，颜色只代表它练的能力。
   不用表情符号、渐变和阴影；触控目标不小于 44px；最小字 11px。 */

@font-face {
  font-family: 'Gabarito';
  src: url('/m/pkg-ui/fonts/Gabarito.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* 牌桌与文字 */
  --wy-table: #16140F;
  --wy-raised: #24211A;
  --wy-raised-2: #3A362C;
  --wy-grabber: #5A5548;
  --wy-paper: #F6F4EE;
  --wy-white: #FFFFFF;
  --wy-mist: #B8B3A6;
  --wy-dim: #9A9588;
  --wy-alert: #FF6B4A;

  /* 彩色卡上的字：一律墨色 */
  --wy-ink: #16140F;
  --wy-ink-soft: rgba(22, 20, 15, 0.72);
  --wy-ink-faint: rgba(22, 20, 15, 0.28);
  --wy-ink-wash: rgba(22, 20, 15, 0.1);
  --wy-scrim: rgba(0, 0, 0, 0.55);

  /* 能力色卡：说 听 词 用 写 */
  --wy-speak: #FF9D8A;
  --wy-listen: #8FCBFA;
  --wy-vocab: #FFD84D;
  --wy-use: #C3B1FA;
  --wy-write: #7ADFAE;

  /* 后台图表配色（N8，只用在后台图表；和 palette.js 的 CHART 一一对应） */
  --wy-chart-speak: #D9644A;
  --wy-chart-listen: #3E86D6;
  --wy-chart-vocab: #B98A10;
  --wy-chart-use: #8A68E0;
  --wy-chart-write: #25A272;
  --wy-chart-test: #F6F4EE;
  --wy-chart-control: #9A9588;

  /* 字体 */
  --wy-font: 'Gabarito', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --wy-font-ipa: 'Noto Sans', 'Segoe UI', 'Helvetica Neue', 'Arial Unicode MS', sans-serif;

  /* 字号 / 行高（K1：英文主角词 44–72、大数字 56–88、玩件标题 40/46、页面标题 28/34、面板标题 17–20、例句 20/28、正文 15/22、说明 13/18、最小 11/14） */
  --wy-fs-hero: 56px;   --wy-lh-hero: 1.05;
  --wy-fs-num: 72px;    --wy-lh-num: 0.95;
  --wy-fs-title: 40px;  --wy-lh-title: 46px;
  --wy-fs-page: 28px;   --wy-lh-page: 34px;
  --wy-fs-panel: 20px;  --wy-lh-panel: 28px;
  --wy-fs-section: 17px; --wy-lh-section: 24px;
  --wy-fs-example: 20px; --wy-lh-example: 28px;
  --wy-fs-body: 15px;   --wy-lh-body: 22px;
  --wy-fs-note: 13px;   --wy-lh-note: 18px;
  --wy-fs-min: 11px;    --wy-lh-min: 14px;

  /* 圆角、尺寸 */
  --wy-r-card: 28px;
  --wy-r-inner: 20px;
  --wy-r-pill: 999px;
  --wy-touch: 44px;
  --wy-btn-h: 56px;
  --wy-gutter: 16px;
  --wy-tabbar-h: 56px;
  --wy-topbar-h: 48px;

  /* 安全区（APP 里刘海和底部横条） */
  --wy-safe-top: env(safe-area-inset-top, 0px);
  --wy-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* 页面宽度：手机全宽，桌面浏览器里居中成一台手机的宽度 */
  --wy-app-max: 430px;

  /* 动效 */
  --wy-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wy-fast: 160ms;
  --wy-slow: 320ms;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --wy-fast: 0ms; --wy-slow: 0ms; }
}