/* design-tokens.css — 设计变量草稿（架构师出，前端/设计落地）
 *
 * 三层结构：
 *   Layer 0 Primitive   原始色板（仅此文件出现字面色值）
 *   Layer 1 Semantic    语义/主题（组件只允许引用这一层）
 *   Layer 2 Component    头像/功能色板（纯色区分，非渐变主视觉）
 *
 * 规则：
 *   1. 组件样式（styles.css / Tailwind 任意值）只允许引用 Semantic / Component 层变量；
 *      Primitive 层仅在本文定义，不在别处直接使用。
 *   2. 与 Tailwind 协同：tailwind.config 的 theme.colors 直接引用 var(--...)，
 *      保证「工具类」与「自定义 CSS」同源，杜绝散落 hex（P0-3）。
 *   3. P0-2：头像纯色不得拼成「紫→粉渐变」作为主视觉。
 *
 * 落地步骤（交给前端）：
 *   a. 在 index.html 的 <link styles.css> 之前引入本文件；
 *   b. 把 styles.css 里的裸 hex 全部替换为对应 var(--color-*)；
 *   c. 逐步移除文末「迁移期别名」，让全站只认 Semantic 层。
 */

:root {
  /* ============================================================
   * Layer 0 · Primitive palette（仅此处出现字面色值）
   * ============================================================ */

  /* 品牌靛蓝（沿用现有 --c-accent #4f46e5） */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;

  /* 中性灰（slate 系：文字 / 边框 / 背景） */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #0f172a; /* 主显示区深色底 */

  /* 状态色 */
  --green-500: #10b981;
  --green-600: #047857;
  --amber-500: #f59e0b;
  --amber-600: #b45309;
  --red-500:   #ef4444;
  --red-600:   #dc2626;

  /* ============================================================
   * Layer 1 · Semantic（主题 / 语义 — 组件只引用这一层）
   * ============================================================ */

  --color-bg-base:      var(--gray-50);
  --color-bg-surface:   #ffffff;            /* P0-3 允许 #fff/#000 字面 */
  --color-bg-surface-2: var(--gray-100);
  --color-bg-inverse:   var(--gray-950);

  --color-text-primary:   var(--gray-900);
  --color-text-secondary: var(--gray-500);
  --color-text-tertiary:  var(--gray-400);
  --color-text-inverse:   #ffffff;

  --color-border:       var(--gray-200);
  --color-border-strong: var(--gray-300);

  --color-accent:       var(--brand-600);
  --color-accent-hover: var(--brand-700);
  --color-accent-soft:  var(--brand-50);    /* 浅底：聊天教师气泡、pill、focus 环 */

  --color-success:      var(--green-500);
  --color-success-soft: #ecfdf5;
  --color-warning:      var(--amber-500);
  --color-warning-soft: #fffbeb;
  --color-danger:       var(--red-600);
  --color-danger-soft:  #fef2f2;

  /* 遮罩 / 暗色底（主显示区、scrim）— 用 token 收口 rgba，禁止组件写裸 rgba */
  --color-scrim:        rgba(15, 23, 42, 0.72);
  --color-scrim-strong: rgba(17, 24, 39, 0.85);
  --color-overlay-tint: rgba(255, 255, 255, 0.10);

  /* 摄像头开启时的「live」绿环 */
  --color-live:         var(--green-500);

  /* ============================================================
   * Layer 1 · 表单 / 焦点 / 阴影 / 动效（设计稿 §2 引用，并入此处收口）
   * 颜色一律映射到语义/组件层，禁止组件写裸 rgba（P0-3）。
   * ============================================================ */
  --focus-ring:   0 0 0 3px var(--color-accent-soft);   /* 复用 accent-soft，不裸 rgba */
  --shadow-1:     rgba(0, 0, 0, .06);   /* 卡片 hover / 浮层 */
  --shadow-2:     rgba(0, 0, 0, .25);
  --shadow-3:     rgba(0, 0, 0, .35);
  --motion-base:  200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* ============================================================
   * Layer 2 · Component（头像 / 功能色板，纯色区分，非渐变主视觉）
   * 注意：仅作「区分」用途；不得拼成紫→粉渐变作为主视觉（P0-2）。
   * ============================================================ */
  --avatar-indigo:  #6366f1;
  --avatar-amber:   #f59e0b;
  --avatar-violet:  #8b5cf6;
  --avatar-rose:    #f43f5e;
  --avatar-emerald: #10b981;
  --avatar-sky:     #0ea5e9;
  --avatar-teal:    #14b8a6;
  --avatar-fuchsia: #d946ef;

  /* 间距 / 圆角 / 触控（响应式与 ≥44px 触控目标，P0 体验） */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --tap-target: 44px;   /* 最小可点区域 */

  /* ============================================================
   * 迁移期别名（兼容现有 styles.css 已用变量，后续移除）
   * ============================================================ */
  --c-border: var(--color-border);
  --c-text:   var(--color-text-primary);
  --c-text-2: var(--color-text-secondary);
  --c-accent: var(--color-accent);
}

/* ============================================================
 * 扁平 token 别名层（兼容 styles.css 既有命名）
 * styles.css 使用扁平命名（--accent / --bg / --fg / --space-* 等），
 * 此处映射到上面的语义/原语 token，保证全站 CSS 变量可解析
 * （修复「页面破版 / 像乱码」的根因：变量未定义）。
 * 组件样式仍禁止直接使用原语层以外的裸色值。
 * ============================================================ */
:root {
  /* 间距比例 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 48px;

  /* 字体族 / 字号 / 字重 */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-2xl: 24px;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-tracking-caps: .04em;

  /* 圆角补充 */
  --radius-full: 999px;

  /* 主色 / 次色（深蓝 + 青 双主色语言；P0-2 仅纯色，非渐变） */
  --accent: var(--color-accent);
  --accent-on: var(--color-text-inverse);
  --accent-hover: var(--color-accent-hover);
  --accent-active: var(--brand-700);
  --accent-soft: var(--color-accent-soft);
  --accent-2: #0EA5E9;            /* 青：学生 / 次强调 */
  --accent-2-soft: #E0F2FE;
  --accent-2-hover: #0284C7;

  /* 文本 / 背景 / 表面 / 边框 */
  --bg: var(--color-bg-base);
  --fg: var(--color-text-primary);
  --fg-2: var(--color-text-secondary);
  --muted: var(--color-text-tertiary);
  --surface: var(--color-bg-surface);
  --surface-2: var(--color-bg-surface-2);
  --border: var(--color-border);

  /* 状态色 */
  --danger: var(--color-danger);
  --success: var(--color-success);

  /* 主舞台深色底（课堂显示区） */
  --stage-bg: var(--color-bg-inverse);
  --stage-fg: var(--color-text-inverse);
  --stage-border: var(--color-overlay-tint);

  /* 阴影 / 动效（复用语义层） */
  --shadow-raised: 0 8px 24px rgba(15, 23, 42, .18);
  --motion-ease: var(--ease-standard);
}