/* ============================================================
   Design Tokens — 背单词系统 统一设计变量
   风格：B版 奶油白温暖童趣（原生 CSS，可商用）
   规范：底色 #f8f4ef · 卡片 #ffffff · 主色 #3a6b7e · 暖橙 #e8a87c
   圆角：卡片 16px / 20px · 头像 10px · 按钮药丸 999px
   ============================================================ */

:root {
  /* ===== 主色调：清爽蓝 ===== */
  --color-primary:          #3a6b7e;
  --color-primary-light:    #6d9cae;
  --color-primary-dark:     #2d5565;
  --color-primary-bg:       rgba(58, 107, 126, 0.08);
  --color-primary-bg-hover: rgba(58, 107, 126, 0.14);
  --bg-subtle:              #f8f4ef;  /* 卡片内部浅底（报告/统计小块） */

  /* ===== 功能色 ===== */
  --color-success:          #34A873;
  --color-success-bg:       rgba(52, 168, 115, 0.08);
  --color-warning:          #F59E0B;
  --color-warning-bg:       rgba(245, 158, 11, 0.10);
  --color-danger:           #E55353;
  --color-danger-bg:        rgba(229, 83, 83, 0.06);

  /* ===== 强调色（语义化，全端口共用） ===== */
  --accent-blue:            #3a6b7e;
  --accent-green:           #34A873;
  --accent-orange:          #e8a87c;   /* 温暖橙，点缀/装饰 */
  --accent-purple:          #9333ea;   /* 报告/统计辅助紫 */
  --accent-teal:            #0d9488;   /* 报告/统计辅助青 */
  --color-warm:             #e8a87c;   /* alias → 温暖橙 */

  /* ===== 中性色-文字 ===== */
  --text-primary:           #1D1D1F;
  --text-secondary:         #565659;
  --text-tertiary:          #949499;
  --text-placeholder:       #B0B0B5;
  --text-muted:             #949499;   /* alias → tertiary */

  /* ===== 中性色-背景（实色体系，无毛玻璃） ===== */
  --bg-page:                #f8f4ef;    /* 奶油白页面底 */
  --bg-surface:             #ffffff;    /* 卡片实色白 */
  --bg-surface-solid:       #ffffff;
  --bg-overlay:             rgba(0,0,0,0.32);

  /* ===== 边框（暖调浅色） ===== */
  --border-light:           #f0ebe2;
  --border-standard:        #ebe5d9;
  --border-strong:          #d9d0bd;
  --border-glass:           #ebe5d9;    /* 兼容：实色卡片边框 */

  /* ===== 毛玻璃参数（B版降级为实色，禁止再开 blur） ===== */
  --glass-blur:             0px;
  --glass-bg:               #ffffff;
  --glass-bg-modal:         #ffffff;
  --glass-border:           1px solid var(--border-light);

  /* ===== 圆角 ===== */
  --radius-sm:              8px;     /* 输入框、小标签、头像 */
  --radius-md:              16px;    /* 标准卡片 */
  --radius-lg:              20px;    /* 大面板、弹窗 */
  --radius-full:            9999px;  /* 按钮、药丸标签 */

  /* ===== 阴影（轻盈双阴影，全局统一） ===== */
  --shadow-card:            0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-card-hover:      0 2px 4px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.08);
  --shadow-modal:           0 8px 40px rgba(0,0,0,0.14);
  --shadow-button-primary:  0 2px 6px rgba(58,107,126,0.24);

  /* ===== 渐变（B版禁用渐变，统一为实色） ===== */
  --gradient-primary:       #3a6b7e;
  --gradient-card:          #ffffff;
  --gradient-card-glow:     none;

  /* ===== 间距（8px栅格，禁止其他数值） ===== */
  --space-4:                4px;
  --space-8:                8px;
  --space-12:               12px;
  --space-16:               16px;
  --space-24:               24px;
  --space-32:               32px;
  --space-48:               48px;
  --space-section:          28px;    /* 跨板块间距（同板块内卡片 16px） */

  /* ===== 字体栈 ===== */
  --font-sans:              "Noto Sans SC", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-word:              "Inter", "Noto Sans SC", -apple-system, sans-serif;

  /* ===== 字体层级 ===== */
  --text-h1:                28px;
  --text-h2:                20px;
  --text-h3:                16px;
  --text-body:              15px;
  --text-caption:           13px;
  --text-small:             11px;

  /* ===== 报告排版 ===== */
  --report-text-title:      16px;
  --report-text-hero:       22px;
  --report-text-page-title: 24px;
  --report-text-body:       14px;
  --report-text-detail:     13px;
  --report-text-label:      12px;
  --report-text-meta:       11px;
  --report-text-value:      20px;

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

  --leading-heading:        1.25;
  --leading-body:           1.5;

  /* ===== 动效 ===== */
  --ease-out:               cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base:          240ms;
  --duration-fast:          150ms;

  /* ===== 触摸目标 ===== */
  --touch-min:              44px;

  /* ===== 布局 ===== */
  --max-content-width:      720px;   /* 内容最大宽度，防铺满大屏 */
  --sidebar-width:          240px;   /* PC端左侧导航宽度 */
}

/* ============================================================
   暗色模式（可选：专注学习 / 用户手动切换）
   B版主色统一为低饱和蓝 #3a6b7e，暗色下提亮
   ============================================================ */

[data-theme="dark"] {
  --color-primary:          #6d9cae;
  --color-primary-light:    #8fb8c9;
  --color-primary-dark:     #587e90;
  --color-primary-bg:       rgba(109, 156, 174, 0.14);
  --color-primary-bg-hover: rgba(109, 156, 174, 0.20);

  --color-success:          #4ADE80;
  --color-success-bg:       rgba(74, 222, 128, 0.10);
  --color-warning:          #FBBF24;
  --color-warning-bg:       rgba(251, 191, 36, 0.10);
  --color-danger:           #F87171;
  --color-danger-bg:        rgba(248, 113, 113, 0.08);

  --accent-blue:            #6d9cae;
  --accent-green:           #4ADE80;
  --accent-orange:          #e8b08a;
  --accent-purple:          #c084fc;
  --accent-teal:            #2dd4bf;
  --bg-subtle:              #1a1a1c;

  --text-primary:           #E8E6E3;
  --text-secondary:         #9A9A96;
  --text-tertiary:          #5A5A56;
  --text-placeholder:       #4A4A46;
  --text-muted:             #5A5A56;

  --bg-page:                #121214;
  --bg-surface:             #1E1E20;
  --bg-surface-solid:       #1E1E20;
  --bg-overlay:             rgba(0,0,0,0.60);

  --border-light:           rgba(255,255,255,0.06);
  --border-standard:        rgba(255,255,255,0.10);
  --border-strong:          rgba(255,255,255,0.16);
  --border-glass:           rgba(255,255,255,0.08);

  --glass-bg:               #1E1E20;
  --glass-bg-modal:         #232325;
  --glass-border:           1px solid rgba(255,255,255,0.08);

  --shadow-card:            0 1px 3px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.40);
  --shadow-card-hover:      0 1px 3px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.50);
  --shadow-modal:           0 8px 40px rgba(0,0,0,0.55);
  --shadow-button-primary:  0 2px 8px rgba(109,156,174,0.20);

  --gradient-primary:       #6d9cae;
  --gradient-card:          #1E1E20;
  --gradient-card-glow:     none;
}

/* ===== 系统跟随 ===== */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --color-primary:          #6d9cae;
    --color-primary-light:    #8fb8c9;
    --color-primary-dark:     #587e90;
    --color-primary-bg:       rgba(109, 156, 174, 0.14);
    --color-primary-bg-hover: rgba(109, 156, 174, 0.20);
    --color-success:          #4ADE80;
    --color-success-bg:       rgba(74, 222, 128, 0.10);
    --color-warning:          #FBBF24;
    --color-warning-bg:       rgba(251, 191, 36, 0.10);
    --color-danger:           #F87171;
    --color-danger-bg:        rgba(248, 113, 113, 0.08);
    --accent-blue:            #6d9cae;
    --accent-green:           #4ADE80;
    --accent-orange:          #e8b08a;
    --accent-purple:          #c084fc;
    --accent-teal:            #2dd4bf;
    --bg-subtle:              #1a1a1c;
    --text-primary:           #E8E6E3;
    --text-secondary:         #9A9A96;
    --text-tertiary:          #5A5A56;
    --text-placeholder:       #4A4A46;
    --text-muted:             #5A5A56;
    --bg-page:                #121214;
    --bg-surface:             #1E1E20;
    --bg-surface-solid:       #1E1E20;
    --bg-overlay:             rgba(0,0,0,0.60);
    --border-light:           rgba(255,255,255,0.06);
    --border-standard:        rgba(255,255,255,0.10);
    --border-strong:          rgba(255,255,255,0.16);
    --border-glass:           rgba(255,255,255,0.08);
    --glass-bg:               #1E1E20;
    --glass-bg-modal:         #232325;
    --glass-border:           1px solid rgba(255,255,255,0.08);
    --shadow-card:            0 1px 3px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.40);
    --shadow-card-hover:      0 1px 3px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.50);
    --shadow-modal:           0 8px 40px rgba(0,0,0,0.55);
    --shadow-button-primary:  0 2px 8px rgba(109,156,174,0.20);
    --gradient-card:          #1E1E20;
    --gradient-card-glow:     none;
  }
}