/* ============================================================
   词根词源 · 猜词奖励 — mvp_v1 设计 Token（v2 · 铁观音茶色主题）
   ------------------------------------------------------------
   来源：仅参考 D:/code/web_sheet/src/tea-ui.css 的**配色主题**。
        不引入该文件、不修改该文件、不为其搭建 Shadow DOM。
   挂载：:root（light DOM）。tea-ui.css 自身用 :host 定义变量，
        若直接当普通样式表引入会导致全部变量未定义，故本文件独立实现。
   面向：手机端优先。
   ============================================================ */

:root {
  /* ---------- 基础色阶：铁观音茶色（取自 tea-ui.css 主题） ---------- */
  --tea-900: #0d0904;
  --tea-800: #1a1008;
  --tea-700: #2a180a;
  --tea-600: #3d1f0a;
  --tea-500: #5c2e10;
  --tea-400: #8b4513;
  --tea-300: #b8731f;
  --tea-200: #c8922a;
  --tea-100: #e8c87a;
  --tea-050: #f7eac8;

  --sage-050: #eef7ef;
  --sage-100: #d8ebdb;
  --sage-200: #c2d9b5;

  --parchment: #f5f0e8;
  --cream: #faf7f0;
  --white: #ffffff;

  /* ---------- 背景 / 前景 ---------- */
  --bg-app: var(--cream);
  --bg-surface: var(--white);
  --bg-subtle: var(--parchment);
  --bg-sunken: #efe9dd;

  --fg: var(--tea-800);
  --fg-strong: var(--tea-900);
  --fg-muted: #8c7060;
  --fg-faint: #b3a294;
  --fg-on-accent: var(--white);

  /* ---------- 主色 ---------- */
  --accent: var(--tea-500);
  --accent-hover: var(--tea-400);
  --accent-active: var(--tea-600);
  --accent-soft: var(--tea-050);
  --accent-ring: rgba(92, 46, 16, 0.18);
  --accent-gold: var(--tea-200);

  /* ---------- 语义状态 ---------- */
  --danger: #c0392b;
  --danger-soft: #fbeae8;
  --success: #3a7d44;
  --success-soft: var(--sage-050);
  --warning: #b87a1f;
  --warning-soft: #fdf3e0;
  --info: #4a6fa5;
  --info-soft: #eaf0f8;

  /* ---------- 熟练度等级（茶越泡越浓 → 熟练度越高色越深） ---------- */
  --lv0: #d9d0bd;          /* 剩余：未开始，最淡 */
  --lv1: var(--tea-200);   /* 完成 */
  --lv2: var(--tea-300);   /* 熟练 */
  --lv3: var(--tea-500);   /* 掌握：最浓 */
  --lv0-soft: #f2ede2;
  --lv1-soft: #f9f0dc;
  --lv2-soft: #f7e8d6;
  --lv3-soft: #eee3d6;

  /* ---------- 描边 ---------- */
  --border: rgba(139, 69, 19, 0.15);
  --border-strong: rgba(139, 69, 19, 0.3);
  --border-hover: rgba(200, 146, 42, 0.35);

  /* ---------- 字体 ---------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Songti SC", serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --fs-word: clamp(28px, 9vw, 42px); /* 题面词根，用 serif */
  --fs-h1: 20px;
  --fs-h2: 17px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --lh-tight: 1.3;
  --lh-body: 1.6;

  /* ---------- 间距（4 的倍数） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ---------- 圆角 ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- 动效（禁弹跳缓动、禁 >400ms） ---------- */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- 手机端 ---------- */
  --touch-min: 44px;               /* 最小可点区域 */
  --opt-h: 56px;                   /* 选项按钮高度 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --app-max: 520px;                /* 内容最大宽度，桌面居中 */

  /* ---------- 撒花特效（答对奖励） ---------- */
  --confetti-1: #c8922a;
  --confetti-2: #e8c87a;
  --confetti-3: #8b4513;
  --confetti-4: #b8731f;
  --confetti-5: #97c459;
  --confetti-6: #f5f0e8;
  --confetti-count: 24;            /* 单次粒子数上限 */
  --confetti-dur: 1100ms;
}

/* ---------- 暗色：茶色夜间（同一套语义 Token，只换映射） ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-app: #14100a;
    --bg-surface: #1f180f;
    --bg-subtle: #2a2116;
    --bg-sunken: #100c07;

    --fg: #f0e6d8;
    --fg-strong: #faf7f0;
    --fg-muted: #a9988a;
    --fg-faint: #7d6f60;

    --accent: var(--tea-200);
    --accent-hover: var(--tea-100);
    --accent-active: var(--tea-300);
    --accent-soft: rgba(200, 146, 42, 0.16);
    --accent-ring: rgba(200, 146, 42, 0.3);

    --border: rgba(232, 200, 122, 0.16);
    --border-strong: rgba(232, 200, 122, 0.3);
    --border-hover: rgba(232, 200, 122, 0.42);

    --lv0: #55483a;
    --lv0-soft: rgba(85, 72, 58, 0.3);

    --danger-soft: rgba(192, 57, 43, 0.18);
    --success-soft: rgba(58, 125, 68, 0.18);
    --warning-soft: rgba(184, 122, 31, 0.18);
    --info-soft: rgba(74, 111, 165, 0.18);
  }
}

/* ---------- 动效降级：开启减弱动效时，撒花与位移动画全部关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --confetti-count: 0;
  }
}

/* ============================================================
   基础层（仅排版与移动端基线，组件样式由 app.css 承担）
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  min-height: 100dvh; /* 手机地址栏收起/展开时不跳动 */
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg-app);
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  font-weight: 600;
  color: var(--fg-strong);
  line-height: var(--lh-tight);
}

/* 链接：一律不带下划线（浏览器默认会给 a 加下划线，重置里必须显式清掉） */
a,
a:hover,
a:visited,
a:active {
  color: var(--accent);
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  min-height: var(--touch-min);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--fg);
  transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* 题面词根用 serif，与中文正文区分开 */
.word {
  font-family: var(--font-serif);
  font-size: var(--fs-word);
  line-height: 1.15;
  letter-spacing: 0.5px;
  color: var(--fg-strong);
  word-break: break-word;
}

@media (min-width: 560px) {
  body {
    background: var(--bg-sunken);
  }
}