/* 公司后台颜色、尺寸变量的唯一出处（浅色一块、深色一块），页面先引这份再引 style.css。
   美语私教内容后台拷一份到它的 server/app/static/tokens.css，并用测试比对 sha256（美语私教APP 11-10）：
   改这里要通知美语私教APP 同步（tell_line / SendMessage），不然它那边的测试会挂。
   这份只放变量定义，不放别的规则；颜色照 UI设计 11-10《公司后台界面规范》（MyAPP/Design/公司后台界面规范.md），
   要加颜色先告诉 UI设计，浅、深两个值一起定。 */
:root {
  --bg: #F2F2F7;          /* 页底（grouped 底） */
  --sidebar: #FFFFFF;     /* 菜单底 */
  --panel: #FFFFFF;       /* 卡片 */
  --text: #000000;
  --muted: #6C6C70;       /* 次要字 */
  --line: #C6C6C8;        /* 分隔线 */
  --accent: #005C98;      /* 主色：公司蓝 */
  /* 主色做底、上面白字的（主按钮、选中的胶囊、头像）浅深都用 #005C98（白字 7.0:1）；深色下的 --accent 只当字、链接、描边 */
  --accent-fill: #005C98;
  --danger: #FF3B30;
  --warn: #C93400;        /* 橙色当字色 */
  --warn-mark: #FF9500;   /* 警告图标、淡底 */
  --ok: #248A3D;          /* 绿色当字色 */
  --ok-mark: #34C759;
  --hover: color-mix(in srgb, var(--text) 6%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --active: var(--accent-soft);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn-mark) 18%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok-mark) 18%, transparent);
  /* 状态胶囊的底：同色 0.18（UI设计 11-10）；字用深一档的那个变量 */
  --accent-tint: color-mix(in srgb, var(--accent) 18%, transparent);
  --danger-tint: color-mix(in srgb, var(--danger) 18%, transparent);
  --muted-tint: color-mix(in srgb, var(--muted) 18%, transparent);
  /* 实心底色（主按钮、红色件数、选中的选项）上的字：主色、红底上纯白；橙底上黑字才看得清 */
  --on-accent: #FFFFFF;
  --on-danger: #FFFFFF;
  --on-warn: #000000;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  --radius: 12px;
  /* 能点的东西至少 44 高（规范第三节） */
  --control-h: 2.75rem;
  --tabbar-h: 49px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --sidebar: #1C1C1E;
    --panel: #1C1C1E;
    --text: #FFFFFF;
    --muted: #98989F;
    --line: #38383A;
    --accent: #3A97E0;
    --danger: #FF453A;
    --warn: #FF9F0A;
    --warn-mark: #FF9F0A;
    --ok: #30D158;
    --ok-mark: #30D158;
    --hover: color-mix(in srgb, var(--text) 9%, transparent);
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}