/* ==========================================================================
   tokens.css —— 设计变量
   --------------------------------------------------------------------------
   教育意图（贯穿全站的核心决策）：
   用「颜色」代替「语法术语」做记忆载体。
   孩子不记"状语""宾语"，只记颜色块的位置关系：
       橙色(我干嘛) → 青色(状态) → 紫色(地点) → 蓝色(时间)
   这套编码在公式卡、排序槽位、改错高亮、解析面板里必须完全一致。
   ========================================================================== */

:root {
  /* ---------- 底色 ---------- */
  --bg:       #F6F4EE;   /* 米白纸感，比纯白护眼，投屏也不刺眼 */
  --surface:  #FFFFFF;
  --surface-2:#FBFaf6;
  --board:    #1F3D34;   /* 黑板绿，用于公式卡、结算页、Day7 游戏 */
  --chalk:    #EEF3EF;
  --ink:      #16202B;   /* 主文字，不用纯黑 */
  --ink-2:    #5A6674;
  --ink-3:    #8B95A1;
  --line:     #E3DFD4;
  --line-2:   #D8D3C6;
  --focus:    #2F6BD8;

  /* ---------- 成分色 ----------
     左列是识别色（只做背景/边框/色块）；右列是文字色（达标对比度）。
     ⚠️ #F2843C 在白底上对比度只有约 2.3:1，绝不能直接当文字色用。 */
  --c-action:     #F2843C;  --c-action-ink:  #A8501A;  --c-action-bg:  #FDF0E6;
  --c-manner:     #17A2A2;  --c-manner-ink:  #0E6B6B;  --c-manner-bg:  #E4F5F5;
  --c-place:      #7B5EA7;  --c-place-ink:   #553F76;  --c-place-bg:   #F0EBF7;
  --c-time:       #3A7BD5;  --c-time-ink:    #2A5AA0;  --c-time-bg:    #E8F0FB;
  --c-be:         #2AA37A;  --c-be-ink:      #1B6B50;  --c-be-bg:      #E6F5EF;
  --c-trigger:    #E5484D;  --c-trigger-ink: #A62F33;  --c-trigger-bg: #FCEAEA;

  /* ---------- 语义色 ---------- */
  --ok:   #2AA37A;
  --no:   #E4572E;
  --warn: #F2B33D;

  /* ---------- 字号 ----------
     用 rem，A+/A- 按钮改 html 的 font-size 就能全局缩放（投屏到教室大屏时有用） */
  --fs-hero:  2.125rem;   /* 34px 首页标题 / 结算 */
  --fs-stem:  1.625rem;   /* 26px 题干中文 */
  --fs-en:    1.5rem;     /* 24px 英文例句 */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-body:  1.0625rem;  /* 17px 正文 */
  --fs-label: 0.9375rem;  /* 15px */
  --fs-mini:  0.8125rem;  /* 13px */

  /* ---------- 形状 ---------- */
  --r-card: 16px;
  --r-btn:  14px;
  --r-slot: 12px;
  --r-chip: 999px;
  --sh-1: 0 1px 2px rgba(22,32,43,.06);
  --sh-2: 0 1px 2px rgba(22,32,43,.06), 0 8px 24px -12px rgba(22,32,43,.18);
  --sh-3: 0 2px 6px rgba(22,32,43,.08), 0 18px 40px -18px rgba(22,32,43,.26);

  /* ---------- 动效 ---------- */
  --t-fast: 140ms;
  --t:      240ms;
  --t-slow: 320ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- 布局 ---------- */
  --wrap: 680px;          /* 投屏和手机都舒服的最大宽度 */
  --pad: 20px;
  --bottom-h: 72px;       /* 底部固定操作区 */

  /* ---------- 字体（零外链，不引 CDN） ---------- */
  --font-ui: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
             system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-en: "Segoe UI Variable Text", "Segoe UI", -apple-system,
             "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* 前庭敏感的孩子：抖动和缩放动效全部降级为瞬时 */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t: 1ms; --t-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 600px) {
  :root {
    --fs-hero: 1.75rem;
    --fs-stem: 1.375rem;
    --fs-en:   1.25rem;
    --fs-lg:   1.125rem;
    --pad: 16px;
  }
}

/* 大屏（教室投影）适度放大 */
@media (min-width: 1200px) {
  :root { --wrap: 760px; }
}