/* ==========================================================================
   英语冒险岛 · 设计令牌
   两套视觉体系：主线（可爱卡通）/ 挑战（深色霓虹）
   所有颜色、字号、间距、圆角、阴影只在此定义，其它样式文件一律引用变量
   ========================================================================== */

:root {
  /* ---------- 主线 · 配色 ---------- */
  --c-purple:      #7D5CFF;
  --c-purple-l:    #8C6BFF;
  --c-purple-d:    #6B45F5;
  --c-grad:        linear-gradient(90deg, #8C6BFF, #6B45F5);

  --c-lav:         #F4F0FF;
  --c-lav2:        #F1EDFF;
  --c-line:        #EDEBF5;
  --c-line2:       #E0DCEC;

  --c-ink:         #2C2850;
  --c-ink2:        #6F6B88;
  --c-ink3:        #8A86A8;
  --c-ink4:        #A8A3BE;

  --c-yellow:      #FFD166;
  --c-warm:        #FFF6DC;
  --c-warm-ink:    #B57C00;
  --c-orange:      #F0A020;

  --c-green:       #22B573;
  --c-green-bg:    #E4F7EC;
  --c-green-card:  #F9FFF8;

  --c-red:         #FA595C;
  --c-red-bg:      #FFEFEF;
  --c-blue:        #2E8AF0;

  --g-sky:         linear-gradient(180deg, #D9EDFF 0%, #FFF7E0 100%);
  --g-party:       linear-gradient(180deg, #F2EDFF 0%, #FFF5DE 100%);
  --g-soft:        linear-gradient(180deg, #F5F3FC 0%, #FFFFFF 100%);

  /* ---------- 挑战 · 配色 ---------- */
  --x-bg:          #080B1A;
  --x-panel:       #111629;
  --x-panel2:      #1A2138;
  --x-line:        #242E4D;
  --x-line2:       #2A3557;
  --x-ink:         #EAF2FF;
  --x-ink2:        #94A2C6;
  --x-ink3:        #5F6D93;

  --x-cyan:        #00E0FF;
  --x-violet:      #A855F7;
  --x-yellow:      #FFD500;
  --x-red:         #FF3B5C;
  --x-green:       #3FE07A;
  --x-grad:        linear-gradient(90deg, #00E0FF, #A855F7);

  /* ---------- 字体 ---------- */
  --f-cn:    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --f-num:   'Orbitron', var(--f-cn);
  --f-en:    'Chakra Petch', 'Rajdhani', var(--f-cn);
  --f-mono:  'Share Tech Mono', ui-monospace, monospace;

  /* ---------- 字号（流式，兼顾手机与平板） ---------- */
  --t-xs:    clamp(11px, 0.72vw, 13px);
  --t-sm:    clamp(13px, 0.86vw, 15px);
  --t-md:    clamp(15px, 1.00vw, 17px);
  --t-lg:    clamp(18px, 1.25vw, 21px);
  --t-xl:    clamp(22px, 1.70vw, 28px);
  --t-2xl:   clamp(28px, 2.40vw, 38px);
  --t-3xl:   clamp(36px, 3.60vw, 56px);
  --t-hero:  clamp(48px, 5.20vw, 84px);

  /* ---------- 间距 ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---------- 圆角 ---------- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---------- 阴影 ---------- */
  --sh-1:  0 1px 2px rgba(28, 26, 56, .05);
  --sh-2:  0 6px 16px rgba(28, 26, 56, .08);
  --sh-3:  0 14px 34px rgba(28, 26, 56, .12);
  --sh-4:  0 30px 80px -20px rgba(28, 26, 56, .30);
  --sh-brand:   0 12px 26px rgba(125, 92, 255, .34);
  --sh-ok:      0 10px 24px rgba(34, 181, 115, .28);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .16s;
  --dur:      .24s;
  --dur-slow: .40s;

  /* ---------- 布局 ---------- */
  --page-max: 1180px;   /* 内容最大宽度 */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- 深色挑战主题：作用在容器上即可切换 ---------- */
.theme-challenge {
  --c-ink:     var(--x-ink);
  --c-ink2:    var(--x-ink2);
  --c-ink3:    var(--x-ink3);
  --c-ink4:    var(--x-ink3);
  --c-line:    var(--x-line);
  --c-line2:   var(--x-line2);
  --c-lav:     #16203A;
  --c-lav2:    #111629;
  --c-grad:    var(--x-grad);
  --c-purple:  var(--x-cyan);
  --sh-2:      0 6px 18px rgba(0, 0, 0, .40);
  --sh-3:      0 14px 34px rgba(0, 0, 0, .50);
  background: var(--x-bg);
  color: var(--x-ink);
}

/* ---------- 无障碍：尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}