/* ============================================================
   OI伴学 · 设计令牌层 (Design Tokens)
   作用：统一设计系统的单一事实来源（单一 token 层）。
   用法：在 <head> 最前面 <link>，其余 css 全部引用这里的变量。
   设计目标（来自 UI 设计检查优化稿）：
     1. 双色系语义 —— 练习/学习用蓝(--brand)，AI 伴学用靛(--ai)
     2. 统一圆角 8/12/16/20、间距 8 的倍数
     3. 正文对比度达 WCAG AA（--text-tertiary 不再用于小号字）
     4. 暗色模式支持「手动 data-theme 切换」+「跟随系统」双通道
   ============================================================ */

:root {
  /* —— 品牌蓝（练习 / 学习 / 常规操作）—— */
  --brand:        #2563eb;
  --brand-dark:   #1d4ed8;
  --brand-100:    #dbeafe;   /* 浅蓝填充（激活态底） */
  --brand-50:     #eff6ff;   /* 更浅蓝填充（图标块底） */

  /* —— AI 靛（AI 伴学 / 五大智能体 / 智能体入口）—— */
  --ai:           #6366f1;
  --ai-dark:      #4f46e5;
  --ai-100:       #e0e7ff;
  --ai-50:        #eef2ff;

  /* —— 语义状态色 —— */
  --success:      #16a34a;
  --success-50:   #dcfce7;
  --warning:      #d97706;
  --warning-50:   #fff7ed;
  --warning-text: #b45309;
  --danger:       #dc2626;
  --danger-50:    #fef2f2;

  /* —— 表面（背景 / 卡片）—— */
  --bg:           #f8fafc;   /* 页面底色 */
  --bg-alt:       #f1f5f9;   /* 次级底色（hover / 内嵌盒） */
  --card:         #ffffff;   /* 卡片底 */
  --card-alt:     #f8fafc;   /* 卡片内嵌盒底 */

  /* —— 文字（对比度已校至 AA）—— */
  --text:         #0f172a;   /* 标题 / 强调，对比度 ≈ 15:1 */
  --text-secondary:#475569;  /* 正文，对比度 ≈ 7:1 */
  --text-tertiary:#64748b;   /* 辅助说明，对比度 ≈ 4.6:1（仅 ≥13px 使用） */
  --text-muted:   #94a3b8;   /* 极弱提示，仅装饰（非必要信息） */

  /* —— 描边 —— */
  --border:       #e2e8f0;
  --border-light: #f1f5f9;

  /* —— 圆角（统一为 8/12/16/20 四档 + 胶囊）—— */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

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

  /* —— 阴影（仅三层）—— */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.10);

  /* —— 字体 —— */
  --font-ui: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', -apple-system,
             BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* —— 字号（与现有 --text-* 对齐，附加层级语义）—— */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.8125rem; /* 13px */
  --fs-base: 0.9375rem; /* 15px */
  --fs-md:   1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.375rem;  /* 22px */
  --fs-2xl:  1.75rem;   /* 28px */
  --fs-hero: 2.125rem;  /* 34px */
}

/* ============================================================
   暗色模式
   优先级：手动 [data-theme] 覆盖系统偏好；未设置时跟随系统。
   接入方式：
     <html data-theme="dark">   强制暗色
     <html data-theme="light">  强制浅色
     （不写 / data-theme 为空）  → 跟随 prefers-color-scheme
   ============================================================ */

:root[data-theme="dark"] {
  --brand:      #3b82f6;
  --brand-dark: #60a5fa;
  --brand-100:  #1e3a5f;
  --brand-50:   #1e293b;
  --ai:         #818cf8;
  --ai-dark:    #a5b4fc;
  --ai-100:     #312e81;
  --ai-50:      #1e1b4b;
  --success:    #34d399;
  --success-50: #064e3b;
  --warning:    #fbbf24;
  --warning-50: #2d1a0e;
  --warning-text:#fbbf24;
  --danger:     #f87171;
  --danger-50:  #4c1d1d;
  --bg:         #0f172a;
  --bg-alt:     #131c31;
  --card:       #1e293b;
  --card-alt:   #0f172a;
  --text:       #e2e8f0;
  --text-secondary:#cbd5e1;
  --text-tertiary:#94a3b8;
  --text-muted: #64748b;
  --border:     #334155;
  --border-light:#1e293b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.5);
}

/* 跟随系统（仅当用户未显式选择浅/暗时生效） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --brand:      #3b82f6;
    --brand-dark: #60a5fa;
    --brand-100:  #1e3a5f;
    --brand-50:   #1e293b;
    --ai:         #818cf8;
    --ai-dark:    #a5b4fc;
    --ai-100:     #312e81;
    --ai-50:      #1e1b4b;
    --success:    #34d399;
    --success-50: #064e3b;
    --warning:    #fbbf24;
    --warning-50: #2d1a0e;
    --warning-text:#fbbf24;
    --danger:     #f87171;
    --danger-50:  #4c1d1d;
    --bg:         #0f172a;
    --bg-alt:     #131c31;
    --card:       #1e293b;
    --card-alt:   #0f172a;
    --text:       #e2e8f0;
    --text-secondary:#cbd5e1;
    --text-tertiary:#94a3b8;
    --text-muted: #64748b;
    --border:     #334155;
    --border-light:#1e293b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.5);
  }
}