:root {
  /* =============================================
     Design Tokens — "数学冒险岛" Design System
     所有样式必须引用这些变量，禁止硬编码颜色/字号/间距
     ============================================= */

  /* --- Background & Surface --- */
  --bg-warm:        #FFF8F0;
  --bg-cream:       #FEF3E2;
  --surface:        #FFFFFF;
  --surface-dim:    #F5F0EB;

  /* --- Text --- */
  --text-primary:   #2D2A26;
  --text-secondary: #6B6560;
  --text-muted:     #A09890;
  --text-on-accent: #FFFFFF;

  /* --- Module Accent Colors --- */
  /* 每个游戏模块有自己的主色，进入模块时设置 --module-color */
  --ten-color:      #FF6B35;   /* 凑十消消乐：橙 */
  --meet-color:     #3B82F6;   /* 相遇问题：蓝 */
  --area-color:     #8B5CF6;   /* 面积对对碰：紫 */
  --grid-color:     #059669;   /* 数表迷城：绿 */
  --read-color:     #DC2626;   /* 火眼金睛：红 */
  --tri-color:      #F59E0B;   /* 数塔寻宝：橙黄 */
  --jisuan-color:   #0EA5E9;   /* 算式工坊：天蓝 */
  --angle-color:    #6366F1;   /* 角度侦探：靛蓝 */
  --eq-color:       #0D9488;   /* 方程解应用题：青绿（天平 · 平衡感） */

  /* 当前模块色（由 JS 在进入模块时动态切换） */
  --module-color:   #3B82F6;
  --module-light:   #EFF6FF;   /* 模块色的浅底 */
  --module-dark:    #1D4ED8;   /* 模块色的深色变体 */

  /* --- Semantic --- */
  --correct:        #16A34A;
  --correct-bg:     #F0FDF4;
  --wrong:          #DC2626;
  --wrong-bg:       #FEF2F2;
  --warning:        #F59E0B;
  --warning-bg:     #FFFBEB;
  --info:           #3B82F6;
  --info-bg:        #EFF6FF;

  /* --- Typography --- */
  --font-display:   "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body:      "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 严格 5 级字号 */
  --text-hero:      2rem;        /* 32px — 首页大标题 */
  --text-title:     1.5rem;      /* 24px — 页面/关卡标题 */
  --text-heading:   1.125rem;    /* 18px — 卡片标题/公式 */
  --text-body:      1rem;        /* 16px — 正文/按钮 */
  --text-caption:   0.8125rem;   /* 13px — 辅助说明/badge */

  /* 行高 */
  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* 字重：只用两档 */
  --weight-normal:  400;
  --weight-bold:    700;

  /* --- Spacing (8px base) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Border Radius (3 档) --- */
  --radius-sm:  8px;     /* badge, input, 小元素 */
  --radius-md: 14px;     /* 按钮, 卡片 */
  --radius-lg: 20px;     /* 大面板, modal */

  /* --- Shadows (3 档) --- */
  --shadow-sm:  0 2px  8px rgba(45,42,38, 0.08);
  --shadow-md:  0 4px 16px rgba(45,42,38, 0.12);
  --shadow-lg:  0 8px 32px rgba(45,42,38, 0.16);

  /* --- Z-index --- */
  --z-base:     1;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;

  /* --- Transitions --- */
  --ease-out:   cubic-bezier(0.33, 1, 0.68, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}

/* === Module color presets (JS 切换 data-module 属性即可) === */
[data-module="ten"]  { --module-color: var(--ten-color);  --module-light: #FFF7ED; --module-dark: #EA580C; }
[data-module="meet"] { --module-color: var(--meet-color); --module-light: #EFF6FF; --module-dark: #1D4ED8; }
[data-module="area"] { --module-color: var(--area-color); --module-light: #F5F3FF; --module-dark: #6D28D9; }
[data-module="grid"] { --module-color: var(--grid-color); --module-light: #ECFDF5; --module-dark: #047857; }
[data-module="read"] { --module-color: var(--read-color); --module-light: #FEF2F2; --module-dark: #B91C1C; }
[data-module="tri"]  { --module-color: var(--tri-color);  --module-light: #FFFBEB; --module-dark: #D97706; }
[data-module="jisuan"] { --module-color: var(--jisuan-color); --module-light: #F0F9FF; --module-dark: #0284C7; }
[data-module="angle"] { --module-color: var(--angle-color); --module-light: #EEF2FF; --module-dark: #4338CA; }
[data-module="eq"]    { --module-color: var(--eq-color);    --module-light: #F0FDFA; --module-dark: #0F766E; }