/* ================================================================
   theme.css —— 全局颜色与文字规格（整个网站只在这里定颜色）
   ----------------------------------------------------------------
   改造说明（第 2 步）：
     参考多邻国（Duolingo）的设计语言重构了配色与质感：
       · 颜色更鲜亮、对比更强
       · 每个主色都配一个"底面深色"（--xxx-edge），
         按钮下方的 4px 厚边就是用它画的
       · 文字不用纯黑，用 #3C3C3C，看起来更柔和
     但主基调仍然保留"暖橙 + 木头书桌"的调子，没有换成多邻国的绿。
     想换成多邻国那种亮绿：把 --brand 改成 #58CC02、--brand-edge 改成 #46A302。

   想改什么：只改下面 :root { } 里的变量，全站跟着变。
   ================================================================ */

:root {
  /* ---- 背景（暖白，比纯白柔和） ---- */
  --bg:            #FBF8F3;
  --bg-2:          #F3EEE4;
  --card:          #FFFFFF;
  --card-2:        #FAF7F1;

  /* ---- 文字（不用纯黑） ---- */
  --ink:           #3C3C3C;   /* 主文字 */
  --ink-2:         #7A7A7A;   /* 次要文字 */
  --ink-3:         #AFAFAF;   /* 最浅提示 */

  /* ---- 描边（多邻国的边框都偏浅灰、2px） ---- */
  --line:          #E5E5E5;
  --line-2:        #D6D6D6;

  /* ---- 主色：暖橙（按钮、强调） ---- */
  --brand:         #E8912F;
  --brand-edge:    #C1741B;   /* 按钮下方的厚边 */
  --brand-deep:    #8A4E0C;   /* 浅底上的深色文字 */
  --brand-soft:    #FDF1DC;

  /* ---- 功能色：每个都配 edge（厚边）和 soft（浅底） ---- */
  --ok:            #58CC02;   --ok-edge:     #46A302;   --ok-soft:     #EAF7DC;   --ok-deep: #3B7A0A;
  --blue:          #1CB0F6;   --blue-edge:   #1090CC;   --blue-soft:   #E3F4FD;   --blue-deep: #0A6A99;
  --purple:        #8A6BE0;   --purple-edge: #6B4EC2;   --purple-soft: #EFEAFB;   --purple-deep:#4F3691;
  --coral:         #FF6B4A;   --coral-edge:  #D94A2B;   --coral-soft:  #FFEDE8;   --coral-deep: #A6371D;
  --danger:        #FF4B4B;   --danger-edge: #D63A3A;   --danger-soft: #FFECEC;

  /* ---- 圆角（多邻国偏大） ---- */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 20px;
  --r-pill: 999px;

  /* ---- 阴影：多邻国不用模糊阴影，用"实心下边"模拟厚度 ---- */
  --lift-1: 0 2px 0 var(--line);
  --lift-2: 0 4px 0 var(--line);
  --shadow-pop: 0 12px 32px rgba(60, 45, 20, .16);

  /* ---- 字号 ---- */
  --fs-xs: 12px;
  --fs-s:  13px;
  --fs-m:  15px;
  --fs-l:  18px;
  --fs-xl: 24px;
  --fs-2xl: 30px;

  /* ---- 字体：优先圆体（多邻国用的是圆润几何体） ---- */
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- 布局尺寸（改这里能统一调整全站比例） ---- */
  --hud-h: 68px;          /* 顶栏高度 */
  --narration-h: 210px;   /* ★ 底部对话框固定高度（约可放 4 行旁白） */
}

/* ---------- 基础重置 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; font-weight: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* 滚动条也统一一下，别让系统灰色滚动条破坏质感 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }