/* ==========================================================================
 * AI 教培助手 · 老师端 —— 统一设计系统 v2 · 设计令牌（Web :root）
 * 合并：设计系统 v1（业务色 / 对比度规则 / 触控 / 安全区 / 长文 / 旧变量别名）
 *     + Apple 风格预览（主色 #0071E3、分组背景、胶囊按钮、毛玻璃导航、动效）
 * 与 tokens.wxss 变量名完全一致；px × 2 = rpx（页面边距除外，见注释）。
 * 所有"文字色 / 底色"组合均已按 WCAG 2.1 校验 ≥ 4.5:1（数值写在注释里）。
 * ========================================================================== */
:root {
  /* ---------- 品牌主色：Apple 蓝 ---------- */
  --color-primary-50:  #EEF5FE;  /* 选中底、表头、信息块底、标签底 */
  --color-primary-100: #D9EAFC;  /* 浅描边、hover 底 */
  --color-primary-200: #B3D4FA;  /* 上传虚线框、信息描边 */
  --color-primary-500: #2E8BF0;  /* 仅图表/插画（白底 3.46，不做文字） */
  --color-primary-600: #0071E3;  /* = 主色：主按钮、链接、选中、tab 选中（白底 4.70 / 白字 4.70） */
  --color-primary-700: #0062C4;  /* 按下 / hover；灰底或浅蓝底上的蓝色文字（F2F2F7 上 5.31，primary-50 上 5.40） */
  --color-primary-800: #00519F;  /* 浅底上的深蓝文字（primary-50 上 7.14） */
  --color-primary: var(--color-primary-600);
  --color-primary-pressed: var(--color-primary-700);
  --color-primary-text: var(--color-primary-700);   /* 非白底上的蓝色文字统一用它 */
  --color-primary-tint: rgba(0, 113, 227, 0.08);    /* 次按钮浅色填充（半透明，叠在任意底色上） */
  --color-primary-tint-2: rgba(0, 113, 227, 0.16);  /* 次按钮 hover */

  /* ---------- 辅助色 / 强调色 ---------- */
  --color-secondary-50: #ECFEFF;
  --color-secondary:    #0E7490;  /* 青：学员成长、次级数据（白底 5.36） */
  --color-accent-50:  #FFF4E5;
  --color-accent:     #FF9500;    /* 橙：星标、"新"角标——仅面积色，不放文字/白字 */
  --color-accent-text: #A84300;   /* 需要橙色文字时（accent-50 上 5.57） */

  /* ---------- 中性色（Apple 灰阶） ---------- */
  --color-text-1: #1D1D1F;        /* 标题、正文（白底 16.8） */
  --color-text-2: #2C2C2E;        /* 正文（旧 --text 别名） */
  --color-text-3: #48484A;        /* 表单标签、次要文字；fill-2 上仍 7.9 */
  --color-text-4: #6E6E73;        /* 辅助说明——信息性文字最浅档（白底 5.07 / F2F2F7 上 4.54；勿放在 fill-2 上） */
  --color-text-placeholder: #AEAEB2; /* 仅占位符/禁用/装饰箭头，不承载信息（2.21） */
  --color-text-inverse: #FFFFFF;
  --color-border:  #E5E5EA;       /* 内嵌块描边（题卡、反馈卡） */
  --color-border-strong: #D1D1D6; /* 复选框、需要明显边界的控件 */
  --color-separator: rgba(60, 60, 67, 0.16); /* 列表分隔线，0.5px */
  --color-divider: #E5E5EA;       /* 不支持半透明时的分隔线 */
  --color-fill-1:  #F4F4F6;       /* 输入框底、答案区、文件行 */
  --color-fill-2:  #EEEEF0;       /* 分段控件底、chip 默认底、hover */
  --color-bg:      #F2F2F7;       /* 页面分组背景 */
  --color-surface: #FFFFFF;       /* 卡片 */
  --color-surface-2: #FBFBFD;     /* 弹窗底栏、编辑器底 */
  --color-mask:    rgba(0, 0, 0, 0.4);

  /* ---------- 语义色（图形色 / 文字色 / 浅底 / 描边） ---------- */
  --color-success: #248A3D; --color-success-text: #1F7A35; --color-success-bg: #EAF6ED; --color-success-border: #B7E1C1; /* 文字 白底 5.39 / 浅底 4.86 */
  --color-warning: #C93400; --color-warning-text: #A84300; --color-warning-bg: #FFF4E5; --color-warning-border: #FFD8A8; /* 浅底 5.57 */
  --color-danger:  #D70015; --color-danger-text:  #B8000F; --color-danger-bg:  #FFEEEE; --color-danger-border:  #FFC9C9; /* 浅底 6.15 */
  --color-info:    #0071E3; --color-info-text:    #0062C4; --color-info-bg:    #EEF5FE; --color-info-border:    #B3D4FA; /* 信息 = 主色系 */
  --color-wechat:  #07C160;       /* 仅"微信一键登录"，遵循微信品牌规范 */

  /* ---------- 业务色：内容类型（文字 / 浅底） ---------- */
  --tag-lesson-fg:   #0062C4; --tag-lesson-bg:   #EEF5FE;  /* 教案 5.40 */
  --tag-quiz-fg:     #1F7A35; --tag-quiz-bg:     #EAF6ED;  /* 题目 4.86 */
  --tag-feedback-fg: #BE185D; --tag-feedback-bg: #FDF2F8;  /* 反馈 5.53 */
  --tag-scan-fg:     #B45309; --tag-scan-bg:     #FFF7E8;  /* 识别 4.72 */
  /* 学科标签 */
  --subject-chinese-fg: #C2410C; --subject-chinese-bg: #FFF7ED; /* 语文 4.88 */
  --subject-math-fg:    #4338CA; --subject-math-bg:    #EEF2FF; /* 数学 7.07（原品牌靛蓝转为学科色） */
  --subject-english-fg: #0E7490; --subject-english-bg: #ECFEFF; /* 英语 5.15（原与"题目"同为绿色，已分开） */
  --subject-other-fg:   #48484A; --subject-other-bg:   #F2F2F7; /* 其他 8.18 */
  /* 快捷入口图标色块（白色线性图标，≥3:1 图形对比） */
  --tile-lesson: #0071E3; --tile-quiz: #248A3D; --tile-feedback: #D30F45; --tile-scan: #C93400; --tile-students: #5856D6; --tile-library: #0E7490;
  /* 学员头像（白字，全部 ≥4.7:1）——替换 public/app.js AV_COLORS 与 students.js COLORS */
  --avatar-1: #0071E3; --avatar-2: #BE185D; --avatar-3: #047857; --avatar-4: #B45309;
  --avatar-5: #5856D6; --avatar-6: #7C3AED; --avatar-7: #B91C1C; --avatar-8: #0E7490;
  /* 老师会员角标：尺寸包含白色描边 */
  --badge-go-bg: #0071E3; --badge-go-fg: #FFFFFF;
  --badge-pro-bg: #F2B53A; --badge-pro-fg: #4A3200; --badge-ring: #FFFFFF;
  --badge-pro-gradient: linear-gradient(180deg, #F7C95C, #E9A92A);
  --badge-sm-h: 14px; --badge-sm-px: 4px; --badge-sm-font: 9px; --badge-sm-border: 1.5px;
  --badge-sm-right: -4px; --badge-sm-bottom: -2px;
  --badge-lg-h: 18px; --badge-lg-px: 6px; --badge-lg-font: 11px; --badge-lg-border: 2px;
  --badge-lg-right: -6px; --badge-lg-bottom: -2px;
  /* 批改 */
  --grade-right: #248A3D; --grade-wrong: #D70015; --grade-half: #C93400;

  /* ---------- 字体 ---------- */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs:   12px;  /* 最小字号：标签、时间戳 */
  --font-size-sm:   13px;  /* 表单标签、辅助说明、次按钮 */
  --font-size-md:   14px;  /* 列表标题、按钮、输入文字（桌面） */
  --font-size-base: 15px;  /* 默认正文 */
  --font-size-lg:   16px;  /* 长文阅读（教案/反馈/题干），配 line-height-loose */
  --font-size-xl:   17px;  /* 卡片标题、弹窗标题（Apple Headline） */
  --font-size-2xl:  20px;  /* 区块标题 */
  --font-size-3xl:  24px;  /* 登录品牌名、统计大数字 */
  --font-size-4xl:  28px;  /* 页面大标题（移动端） */
  --font-size-5xl:  32px;  /* 页面大标题 / 问候语（桌面） */
  --line-height-tight: 1.25; /* 大标题 */
  --line-height-snug:  1.4;  /* 卡片标题 */
  --line-height-base:  1.6;  /* 正文 */
  --line-height-loose: 1.8;  /* 长文阅读 */
  --letter-spacing-title: -0.02em;
  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;

  /* ---------- 圆角（同心：外圆角 = 内圆角 + 内边距） ---------- */
  --radius-xs: 6px;      /* 小标签、缩略图内角 */
  --radius-sm: 8px;      /* 侧栏导航项、文件行、答案区 */
  --radius-md: 12px;     /* 输入框、题卡、反馈卡、模式卡 */
  --radius-lg: 16px;     /* 卡片 */
  --radius-xl: 20px;     /* 弹窗、登录卡 */
  --radius-full: 999px;  /* 按钮、chip、tag、status（胶囊） */

  /* ---------- 间距（4px 基准 / 8pt 栅格） ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --page-padding: 40px;  /* 桌面；≤768px 为 16px（小程序 32rpx） */
  --card-padding: 22px;  /* ≤768px 为 16px */
  --card-gap: 20px;      /* ≤768px 为 16px */

  /* ---------- 尺寸 ---------- */
  --tap-min: 44px;              /* 最小可点击区域 */
  --control-height: 40px;       /* 输入框、按钮（≤768px 为 44px） */
  --control-height-lg: 50px;    /* 主 CTA（Apple Large Button） */
  --control-height-sm: 32px;    /* 行内次要按钮，需用外边距补足热区 */
  --icon-size: 20px; --icon-size-sm: 16px; --icon-stroke: 1.8px;
  --sidebar-width: 248px;
  --tabbar-height: 50px;
  --navbar-height: 52px;

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 0.5px 1px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.03);  /* 卡片（v2.1 减弱，主要靠 #F2F2F7 底 + 白卡区分） */
  --shadow-card: var(--shadow-sm);  /* v2.1 新增：卡片专用，小程序端为 none */
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);                                /* 卡片 hover */
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); /* 弹窗、toast */
  --shadow-seg: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);  /* 分段控件滑块 */
  --shadow-focus: 0 0 0 4px rgba(0, 113, 227, 0.18);

  /* ---------- 材质（仅导航层：顶栏 / 标签栏 / 侧栏 / 横幅） ---------- */
  --material-bar: rgba(255, 255, 255, 0.72);
  --material-sidebar: rgba(246, 246, 248, 0.8);
  --material-blur: saturate(180%) blur(20px);
  --material-fallback: rgba(255, 255, 255, 0.97);

  /* ---------- 动效 ---------- */
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);  /* v2.1：强 ease-out，用于按下、toast、sheet 出现 */
  --duration-instant: 100ms; /* 按下缩放 */
  --duration-fast: 150ms;    /* hover / focus / 高频反馈（v2.1：200 → 150） */
  --duration-normal: 300ms;  /* 弹窗、toast */
  --press-scale: 0.97;

  /* ---------- 安全区 ---------- */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);    /* v2.1 新增 */
  --safe-right: env(safe-area-inset-right);  /* v2.1 新增 */
  /* v2.1：整屏高度。默认 100vh 兜底，支持 dvh 的浏览器自动改为 100dvh（见文件末尾 @supports）。
     需要 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> 才能拿到 safe-area。 */
  --viewport-height: 100vh;

  /* ==========================================================================
   * 旧变量别名（过渡期：public/app.css 现有写法无需立即改动，迁移完成后删除）
   * ========================================================================== */
  --primary: var(--color-primary);
  --primary-600: var(--color-primary-700);   /* 旧 --primary-600 表示"更深一档（hover）" */
  --primary-50: var(--color-primary-50);
  --primary-100: var(--color-primary-100);
  --text: var(--color-text-2);
  --muted: var(--color-text-4);
  --border: var(--color-border);
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --green: var(--color-success-text);  --green-50: var(--color-success-bg);
  --red: var(--color-danger);          --red-50: var(--color-danger-bg);
  --amber: var(--color-warning);       --amber-50: var(--color-warning-bg);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-sm);
  --sidebar: var(--sidebar-width);
}
@media (max-width: 768px) {
  :root { --page-padding: 16px; --card-padding: 16px; --card-gap: 16px; --control-height: 44px; }
}

/* ---------- v2.1：动态视口高度（iOS Safari 地址栏伸缩时不被裁切） ---------- */
@supports (height: 100dvh) {
  :root { --viewport-height: 100dvh; }
}

/* ---------- v2.1（计划中）：大字模式 A+ ----------
 * 在 <html> 上加 data-font-scale="large" 开启；默认（A）不受影响。
 * 规则：每档字号整体上移一档，最大档另加 4px。行高、间距、控件高度不变。 */
:root[data-font-scale="large"] {
  --font-size-xs:   13px;
  --font-size-sm:   14px;
  --font-size-md:   15px;
  --font-size-base: 16px;
  --font-size-lg:   17px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  28px;
  --font-size-4xl:  32px;
  --font-size-5xl:  36px;
}