/* =============================================================================
 * 三联慧学 Pad · 设计令牌 tokens.css
 * -----------------------------------------------------------------------------
 * 唯一真值来源。所有页面/组件只允许引用这里的变量，禁止再写死色值/字号/圆角。
 *
 * 取值依据（不是拍脑袋）：
 *   1) `sanlian-uniapp/src/styles/v2.scss` 的设计令牌块 —— js.design《pad教师工作台》
 *      标注原文「字体：圆体　字间距：1　蓝色色值 #2BAEFD；标题 #524337；
 *      正文 #808080 / #524337 / #FFFFFF」，并有 2388×1668@2x 全量像素核验记录。
 *   2) `设计图/学生版/**`、`设计图/教师版/**` 原稿（1194×834 逻辑基准 = iPad 横屏）。
 *
 * 与旧实现的差异（本版新增，见 DESIGN-SYSTEM.md「统一清单」）：
 *   - 补 状态栏 (--h-status) 与 页头 (--h-appbar) 的高度/内边距令牌：原稿完全没有状态栏。
 *   - 语义色取「深色值」保证 WCAG AA 4.5:1；原稿只有装饰色值，白底上不可读。
 * ========================================================================== */

:root {
  /* ---------- 品牌与功能色 ---------- */
  --brand: #2BAEFD;          /* 主蓝：设计稿真值（3.21M px 命中） */
  --brand-d: #1E9CFD;        /* 深一档：按下态 / 渐变尾 / 描边 */
  --brand-dd: #0E86DA;       /* 深二档：白底上的蓝色文字（对比度 ≥4.5:1） */
  --brand-l: #6FB4F7;        /* 浅一档：渐变头 / 浅蓝块 */
  --brand-50: #F2F9FF;       /* 极浅底：选中行 / 信息条 */
  --brand-100: #DFF3FF;      /* 浅蓝底：chip / tag（设计稿个人中心年级 chip 同值） */
  --brand-200: #BFE6FF;

  --orange: #FF9500;
  --orange-l: #FFB930;
  --orange-d: #F07800;
  --orange-50: #FFF6E9;

  --green: #35C759;
  --green-d: #1E9E63;        /* 白底文字用 */
  --green-50: #EAF7DA;
  --teal: #35C7B6;
  --gold: #FFC53D;           /* 金币 */
  --gold-d: #C98A00;

  --red: #FF5A5F;
  --red-d: #D93B40;          /* 白底文字用 */
  --red-50: #FFEDEE;
  --purple: #7B61FF;
  --purple-50: #F0EDFF;

  /* ---------- 文字（墨色）---------- */
  --ink-1: #524337;          /* 标题：暖深棕（设计稿标注） */
  --ink-2: #6E5C4C;          /* 次级标题 */
  --ink-3: #808080;          /* 正文（设计稿标注） */
  --ink-4: #A6A6A6;          /* 辅助 / 占位（设计稿实测更浅一档） */
  --ink-5: #C4C4C4;          /* 图标 / 禁用 */
  --ink-inv: #FFFFFF;        /* 蓝底 / 玻璃底正文 */
  --ink-inv-2: rgba(255, 255, 255, 0.72);

  /* ---------- 表面与描边 ---------- */
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;      /* 页面浅灰底 */
  --surface-3: #F2F4F6;      /* 块底（v2 --v2-block） */
  --surface-4: #E9EDF2;
  --line: #E9EBEF;           /* 分隔线（v2 --v2-line） */
  --line-2: #DCE3EC;         /* 输入框描边 */
  --line-strong: #C9CED6;    /* 关闭按钮灰（v2 .v2-x） */

  /* ---------- 玻璃态（房间场景页专用）---------- */
  --glass: rgba(255, 255, 255, 0.14);
  --glass-2: rgba(255, 255, 255, 0.08);
  --glass-3: rgba(255, 255, 255, 0.22);
  --glass-line: rgba(255, 255, 255, 0.30);
  --glass-line-2: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 8px 32px rgba(9, 60, 110, 0.18);

  /* ---------- 字体 ---------- */
  /* 内嵌「经典圆体简」= 工程 src/static/fonts/classic-round.woff2（跨端一致） */
  --font: 'ClassicRoundSC', 'Yuanti SC', 'YouYuan', 'Hiragino Maru Gothic ProN',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-num: 'DIN Alternate', 'SF Pro Display', var(--font);
  --ls: 1px;                 /* 设计标注：字间距 1 */
  --ls-tight: 0.2px;         /* 长列表 / 表格内收窄，防换行 */

  /* ---------- 字号刻度（8px 基线，平板 1:1）---------- */
  --f-display: 40px;         /* 大数字 / 欢迎页 */
  --f-h1: 30px;              /* 页面主标题 */
  --f-h2: 24px;              /* 卡片组标题 / 顶部 tab */
  --f-h3: 20px;              /* 卡片标题 */
  --f-lg: 17px;
  --f-body: 15px;            /* 正文 */
  --f-sm: 13.5px;            /* 次要正文 */
  --f-xs: 12px;              /* 辅助说明 */
  --f-cap: 11px;             /* 侧栏小字 / 徽章 */
  --lh-tight: 1.25;
  --lh: 1.5;
  --lh-loose: 1.7;

  /* ---------- 间距（8pt 网格 + 4px 半步）---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 28px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  /* ---------- 圆角 ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 14px;              /* v2 --v2-radius */
  --r-lg: 20px;              /* v2 --v2-radius-l */
  --r-xl: 26px;              /* 场景台座卡 */
  --r-pill: 999px;

  /* ---------- 阴影（克制：最多两层）---------- */
  --sh-sm: 0 1px 2px rgba(16, 60, 120, 0.06), 0 2px 8px rgba(16, 60, 120, 0.06);
  --sh-md: 0 4px 16px rgba(16, 60, 120, 0.10);
  --sh-lg: 0 10px 30px rgba(16, 60, 120, 0.16);   /* v2 --v2-shadow */
  --sh-brand: 0 8px 20px rgba(43, 174, 253, 0.32);
  --sh-inset-line: inset 0 0 0 1px var(--line);

  /* ---------- 动效 ---------- */
  --dur-1: 100ms;
  --dur-2: 150ms;
  --dur-3: 200ms;
  --dur-4: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- 结构尺寸（平板横屏 = 设计稿 1194×834）---------- */
  --h-status: 24px;          /* 状态栏 */
  --h-appbar: 56px;          /* 页头 */
  --w-rail: 179px;           /* 左侧导航（设计稿侧栏宽） */
  --w-rail-sm: 88px;         /* 平板竖屏：只剩图标 */
  --pad-page: 24px;          /* 内容区四周留白 */
  --gap: 20px;               /* 卡片间距 */
  --tap: 44px;               /* 最小触控区（无障碍底线） */
  --pad-safe-t: env(safe-area-inset-top, 0px);
  --pad-safe-b: env(safe-area-inset-bottom, 0px);
  --pad-safe-l: env(safe-area-inset-left, 0px);
  --pad-safe-r: env(safe-area-inset-right, 0px);
  --content-max: 1360px;     /* PC 超宽屏内容限宽 */

  /* ---------- 层级 ---------- */
  --z-rail: 30;
  --z-appbar: 40;
  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 100;
  --z-probe: 999;
}

/* 平板竖屏（834×1194）：导航收成图标轨，状态栏加高（刘海/圆角边） */
@media (max-width: 1100px) {
  :root {
    --w-rail: var(--w-rail-sm);
    --pad-page: 20px;
    --gap: 16px;
  }
}

/* 手机（<700）：状态栏交给系统安全区，页头压缩，导航改为底部 Tab */
@media (max-width: 700px) {
  :root {
    --h-status: 0px;         /* 系统状态栏由 OS 绘制，用 env() 安全区让位 */
    --h-appbar: 48px;
    --pad-page: 16px;
    --gap: 12px;
    --f-h1: 24px;
    --f-h2: 20px;
    --f-h3: 17px;
    --f-display: 32px;
    --r-lg: 16px;
    --r-xl: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}