/* ============================================================================
   卡登财商 · Design Tokens
   ----------------------------------------------------------------------------
   主题色（2026-09 定稿）：皇家蓝 #063184（用户提供的信封标准色取样）。
   用法纪律：
     · 大面积填充用品牌蓝本身的加深/提亮档，白字压底；
     · 深底上的文字、星星、链接、光晕用提亮档 --c-accent（#063184 原色在暗底
       上对比度不足，直接当文字色会看不清）；
     · 金色只保留在插画里（金币、钞票、银行）—— 金币本来就是金色，
       蓝 + 金正好是「钱」的经典配色；
     · 薄荷绿 / 珊瑚红只出现在插画、录音态和奖励特效里，不参与界面语义。

   儿童适配不变：
     · 正文基准 17px；触摸目标 56px；圆角整体放大；
     · 动效用带回弹的弹性曲线。
   ========================================================================== */

@font-face { font-family:'Orbitron'; font-weight:500; font-display:swap;
  src:url('../assets/fonts/orbitron-500.woff2') format('woff2'); }
@font-face { font-family:'Orbitron'; font-weight:700; font-display:swap;
  src:url('../assets/fonts/orbitron-700.woff2') format('woff2'); }
@font-face { font-family:'Orbitron'; font-weight:900; font-display:swap;
  src:url('../assets/fonts/orbitron-900.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-weight:400; font-display:swap;
  src:url('../assets/fonts/chakra-petch-400.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-weight:500; font-display:swap;
  src:url('../assets/fonts/chakra-petch-500.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-weight:600; font-display:swap;
  src:url('../assets/fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-display:swap;
  src:url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:500; font-display:swap;
  src:url('../assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }

:root {
  /* --- 品牌色锚点（信封标准色） ------------------------------------------ */
  --c-brand:       #063184;   /* 官方主题色，大面积填充用 */
  --c-brand-deep:  #05256b;   /* 品牌色加深档 */

  /* --- 底色：中性黑整体偏蓝，让蓝主题不显脏 ------------------------------- */
  --c-void:        #04060f;
  --c-bg:          #070b18;
  --c-surface:     #0d1428;
  --c-surface-2:   #131d38;
  --c-surface-3:   #1a2748;

  /* --- 文字 ------------------------------------------------------------- */
  --c-text:        #f2f4fb;
  --c-text-dim:    #c3c9da;
  --c-muted:       #8b93ab;

  /* --- UI 强调色：全站唯一（品牌蓝的提亮档，保证暗底可读） ------------------ */
  --c-accent:      #4d7dff;
  --c-accent-deep: #2a50d8;
  --c-accent-ink:  #ffffff;

  /* --- 童趣色：只用于插画 / 奖励特效 / 图表第二系列，不参与界面语义 -------- */
  --c-mint:        #4fe0b8;
  --c-coral:       #ff7a6b;
  --c-sky:         #62b6ff;
  --c-grape:       #a78bfa;
  /* 深色底上的涨跌语义色（中国习惯：涨红跌绿），仅图表用 */
  --c-up:          #ff5c5c;
  --c-down:        #2ecc71;

  --c-line:        rgba(242, 244, 251, 0.10);
  --c-line-strong: rgba(242, 244, 251, 0.20);
  --c-brand-08:     rgba(77, 125, 255, 0.08);
  --c-brand-16:     rgba(77, 125, 255, 0.16);
  --c-brand-28:     rgba(77, 125, 255, 0.28);

  /* --- 字体 ------------------------------------------------------------- */
  --f-display: 'Orbitron', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
  --f-body:    'Chakra Petch', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* --- 字阶：整体比成人版大一档 ------------------------------------------- */
  --fs-xs:  0.8125rem;  /* 13px */
  --fs-sm:  0.9375rem;  /* 15px */
  --fs-md:  1.0625rem;  /* 17px 正文基准 */
  --fs-lg:  1.3125rem;  /* 21px */
  --fs-xl:  1.625rem;   /* 26px */
  --fs-2xl: 2.0625rem;  /* 33px */
  --fs-3xl: 2.5625rem;  /* 41px */
  --fs-4xl: 3.1875rem;  /* 51px */
  --fs-hero: clamp(2.5rem, 7.2vw, 5.25rem);

  /* --- 间距 ------------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px;

  /* --- 圆角：整体放大，"软"起来 ------------------------------------------ */
  --r-xs: 6px; --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px;

  --sh-1: 0 2px 10px rgba(2, 4, 12, 0.5);
  --sh-2: 0 10px 30px rgba(2, 4, 12, 0.58);
  --sh-3: 0 26px 64px rgba(2, 4, 12, 0.66);
  --sh-glow: 0 0 0 1px var(--c-brand-28), 0 12px 40px rgba(77, 125, 255, 0.22);

  /* --- 动效：弹性曲线，反馈更"有手感" ------------------------------------ */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 轻微过冲，像弹簧 */
  --dur-fast: 140ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  --tap: 56px;   /* 触摸目标下限 */
}