/* ==========================================================================
   每日单词 · 设计 Token（单一真源）
   --------------------------------------------------------------------------
   所有颜色、字号、间距、圆角、阴影、动效都在这里定义，组件与页面只引用变量。
   色板取自已验证的分类色板：8 个分类色在明暗两种模式下均通过
   色盲可分辨度（CVD ΔE ≥ 8）、正常视觉可分辨度（ΔE ≥ 15）与对比度校验。
   明暗两套值都是"挑选"出来的，不是把亮色简单反转。
   ========================================================================== */

:root {
  /* ---------- 字体 ---------- */
  /* 全站统一使用系统 UI 无衬线体，中文自动回落到系统中文字体 */
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 音标使用带完整 IPA 字形覆盖的字体栈，避免方框 */
  --font-ipa: "Charis SIL", "Doulos SIL", "Segoe UI", "Lucida Sans Unicode",
              system-ui, sans-serif;

  /* 字号阶梯：单词本身要够大，正文要够松，长期看不累 */
  --text-display: 2.5rem;   /* 40px  单词卡上的主词 */
  --text-h1: 1.75rem;       /* 28px  页面标题 */
  --text-h2: 1.25rem;       /* 20px  区块标题 */
  --text-h3: 1.0625rem;     /* 17px  卡片标题 */
  --text-body: 0.9375rem;   /* 15px  正文 */
  --text-sm: 0.8125rem;     /* 13px  次要信息 */
  --text-xs: 0.75rem;       /* 12px  角标、说明 */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- 间距（4 的倍数） ---------- */
  --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;
  --space-16: 64px;

  /* ---------- 圆角 ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- 布局 ---------- */
  --content-max: 720px;   /* 内容区最大宽度，手机端满宽 */
  --tabbar-h: 58px;       /* 底部导航高度 */
  --topbar-h: 52px;       /* 顶栏高度 */

  /* ---------- 状态色（固定，不随主题变化） ---------- */
  /* 明色面上 warning / serious 对比度低于 3:1，因此永远搭配图标 + 文案，
     绝不用颜色单独表达含义。 */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
}

/* ==========================================================================
   明色主题（默认）
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* 表面层级：页面底 → 卡片 → 抬升块 */
  --bg: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #ffffff;
  --surface-sunken: #f2f1ed;   /* 输入框、进度槽等凹陷区域 */

  /* 文字墨色 */
  --ink: #0b0b0b;
  --ink-secondary: #52514e;
  --ink-muted: #898781;
  --ink-inverse: #ffffff;

  /* 线条 */
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: #c3c2b7;
  --grid: #e1e0d9;

  /* 主色（与分类槽位 1 蓝、顺序色阶同源，保证全站色彩一致） */
  --primary: #2a78d6;
  --primary-hover: #256abf;
  --primary-active: #1c5cab;
  --primary-wash: rgba(42, 120, 214, 0.10);   /* 主色淡底 */
  --primary-wash-strong: rgba(42, 120, 214, 0.18);
  --on-primary: #ffffff;

  /* 分类色：8 个槽位，固定顺序，用于分类瓷砖与图表系列 */
  --cat-1: #2a78d6;  /* 蓝 */
  --cat-2: #eb6834;  /* 橙 */
  --cat-3: #1baf7a;  /* 青绿 */
  --cat-4: #eda100;  /* 黄 */
  --cat-5: #e87ba4;  /* 品红 */
  --cat-6: #008300;  /* 绿 */
  --cat-7: #4a3aa7;  /* 紫 */
  --cat-8: #e34948;  /* 红 */

  /* 顺序色阶（蓝，浅→深）：用于 7 天学习热力图 */
  --seq-0: #f2f1ed;   /* 无学习记录 */
  --seq-1: #cde2fb;
  --seq-2: #9ec5f4;
  --seq-3: #5598e7;
  --seq-4: #2a78d6;
  --seq-5: #184f95;

  /* 阴影：明色下用柔和黑影表达层级 */
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow-md: 0 2px 8px rgba(11, 11, 11, 0.08);
  --shadow-lg: 0 8px 24px rgba(11, 11, 11, 0.10);

  /* 交互反馈 */
  --hover-wash: rgba(11, 11, 11, 0.04);
  --active-wash: rgba(11, 11, 11, 0.07);
  --focus-ring: 0 0 0 3px rgba(42, 120, 214, 0.35);
}

/* ==========================================================================
   暗色主题
   —— 分类色是为暗色面重新挑选的步进值，并按暗色面单独校验过，
      不是把明色值直接翻转。
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232322;
  --surface-sunken: #121211;

  --ink: #ffffff;
  --ink-secondary: #c3c2b7;
  --ink-muted: #898781;
  --ink-inverse: #0b0b0b;

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: #383835;
  --grid: #2c2c2a;

  --primary: #3987e5;
  --primary-hover: #5598e7;
  --primary-active: #6da7ec;
  --primary-wash: rgba(57, 135, 229, 0.16);
  --primary-wash-strong: rgba(57, 135, 229, 0.26);
  --on-primary: #0b0b0b;

  --cat-1: #3987e5;
  --cat-2: #d95926;
  --cat-3: #199e70;
  --cat-4: #c98500;
  --cat-5: #d55181;
  --cat-6: #008300;
  --cat-7: #9085e9;
  --cat-8: #e66767;

  --seq-0: #232322;
  --seq-1: #104281;
  --seq-2: #184f95;
  --seq-3: #256abf;
  --seq-4: #3987e5;
  --seq-5: #86b6ef;

  /* 暗色下阴影几乎不可见，层级主要靠表面色差与描边表达 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.60);

  --hover-wash: rgba(255, 255, 255, 0.06);
  --active-wash: rgba(255, 255, 255, 0.10);
  --focus-ring: 0 0 0 3px rgba(57, 135, 229, 0.45);
}

/* 跟随系统设置；带 :not() 守卫，保证用户手动选的"明色"能压过系统暗色 */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --bg: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232322;
    --surface-sunken: #121211;

    --ink: #ffffff;
    --ink-secondary: #c3c2b7;
    --ink-muted: #898781;
    --ink-inverse: #0b0b0b;

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: #383835;
    --grid: #2c2c2a;

    --primary: #3987e5;
    --primary-hover: #5598e7;
    --primary-active: #6da7ec;
    --primary-wash: rgba(57, 135, 229, 0.16);
    --primary-wash-strong: rgba(57, 135, 229, 0.26);
    --on-primary: #0b0b0b;

    --cat-1: #3987e5;
    --cat-2: #d95926;
    --cat-3: #199e70;
    --cat-4: #c98500;
    --cat-5: #d55181;
    --cat-6: #008300;
    --cat-7: #9085e9;
    --cat-8: #e66767;

    --seq-0: #232322;
    --seq-1: #104281;
    --seq-2: #184f95;
    --seq-3: #256abf;
    --seq-4: #3987e5;
    --seq-5: #86b6ef;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.60);

    --hover-wash: rgba(255, 255, 255, 0.06);
    --active-wash: rgba(255, 255, 255, 0.10);
    --focus-ring: 0 0 0 3px rgba(57, 135, 229, 0.45);
  }
}

/* 尊重"减少动效"偏好：关闭所有非必要动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}