/*
 * 各 App 自己的样子（用户 2026-10-22 定：客服页、账号页在哪个 App 里打开，就跟那个 App 的设计风格一致；消息页、登录页同一套）。
 * 页面在 <head> 里按地址栏的 app_id 给 <html> 加 data-app（SDK 三端打开账号页 / 客服页 / 消息页都带 app_id，/authorize 跳登录页也带），这里按 data-app 换一套颜色和圆角；
 * 没有 app_id（网页直接打开）或不认识的 App = 页面自己的默认样子。:root[data-app] 比页面的 :root 优先，引入顺序无所谓。
 *
 * 用到的变量（页面里只用这些，别直接写色值）：
 *   --bg 页面底 · --card 卡片 · --fg 正文 · --muted 次要文字 · --line 分隔线 · --chip 未选中的按钮 / 小胶囊底
 *   --primary 主色实心底（主按钮、用户气泡）· --on-primary 压在主色上的字 · --primary-ink 当文字 / 图标用的主色（对比度够）
 *   --primary-soft 主色浅底 · --danger / --danger-soft 危险操作 · --radius 卡片圆角 · --pill-radius 小按钮圆角
 *   --badge-bg / --badge-fg 未读角标（月季不要红点，用主色浅底）
 *
 * 色值出处（改了 App 的主题这里跟着改）：
 *   echo     开口鸭   native/ios/EchoKit/Sources/EchoKit/Design/Theme.swift（主色 #FF8C00，和 Flutter AppTheme 一致）
 *   play     玩梗单词 apps/harmony/entry/src/main/resources/{base,dark}/element/color.json（奶油底 + 蓝）、apps/ios/WordCanvas/Theme.swift
 *   beacon   烽火台   app/globals.css（--brand #e8552d、--radius 12px）
 *   yueji    月季     CycleAI/Views/Theme.swift 的 rose 色系（不用灰调：底色、未选中的按钮都带一点粉；没有红点）
 *   cubelife 方块生活 ios/CubeLife/Views/Components/Theme.swift（主色 #E1251B、圆角 6，Material 风格）
 *   ohdock   Ohdock   ohdock 仓库 site/src/styles/global.css 里深色区域那组变量（.site-header / .page-hero / .on-ink）：海外实例；
 *                     2026-10-29 网站改版成深墨蓝顶栏 + 页头带，平台页跟着用深墨蓝底 + 亮绿，浅色、深色模式都是这一套（品牌的样子就是深底）
 */

:root[data-app="echo"] {
  --bg: #f4f5f7; --card: #fff; --fg: #1a1a1a; --muted: #7a7f88; --line: #e8e9ec; --chip: #eef0f3;
  --primary: #ff8c00; --on-primary: #fff; --primary-ink: #b35f00; --primary-soft: rgba(255,140,0,.13);
  --danger: #e5322a; --danger-soft: rgba(255,59,48,.1); --radius: 16px; --pill-radius: 999px;
}
:root[data-app="play"] {
  --bg: #f9f6ee; --card: #fffefb; --fg: #1c2633; --muted: #5f6875; --line: #ece6d8; --chip: #f3efe4;
  --primary: #2985f5; --on-primary: #fff; --primary-ink: #1e6fd9; --primary-soft: rgba(41,133,245,.11);
  --danger: #d63a2f; --danger-soft: rgba(247,84,71,.13); --radius: 20px; --pill-radius: 999px;
  --shadow: 0 1px 2px rgba(28,38,51,.06), 0 4px 14px rgba(28,38,51,.04);
}
:root[data-app="beacon"] {
  --bg: #f6f7f9; --card: #fff; --fg: #1a1d21; --muted: #5b6370; --line: #e5e7eb; --chip: #f0f2f5;
  --primary: #e8552d; --on-primary: #fff; --primary-ink: #b63d1c; --primary-soft: #fdece6;
  --danger: #dc2626; --danger-soft: #fceaea; --radius: 12px; --pill-radius: 8px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
}
:root[data-app="yueji"] {
  --bg: #fff8fa; --card: #fff; --fg: #241419; --muted: #8a6573; --line: #f7e1e9; --chip: #fff0f5;
  --primary: #d9466f; --on-primary: #fff; --primary-ink: #b8285a; --primary-soft: #ffe4ee;
  --danger: #c0264e; --danger-soft: rgba(217,70,111,.12); --radius: 24px; --pill-radius: 999px;
  --badge-bg: #ffe4ee; --badge-fg: #b8285a; --shadow: 0 1px 2px rgba(184,40,90,.05), 0 6px 18px rgba(217,70,111,.06);
}
:root[data-app="cubelife"] {
  --bg: #f5f5f5; --card: #fff; --fg: #241e30; --muted: #757575; --line: #eee; --chip: #f5f5f5;
  --primary: #e1251b; --on-primary: #fff; --primary-ink: #c41e15; --primary-soft: #ffebee;
  --danger: #d54941; --danger-soft: #fff0ed; --radius: 8px; --pill-radius: 6px; --shadow: 0 1px 3px rgba(0,0,0,.08);
}

:root[data-app="ohdock"] {
  --bg: #0a1520; --card: #13212e; --fg: #f1f5f8; --muted: #a2afbb; --line: rgba(255,255,255,.13); --chip: rgba(255,255,255,.07);
  --primary: #38cc99; --on-primary: #03170e; --primary-ink: #74dfb9; --primary-soft: rgba(56,204,153,.14);
  --danger: #f08a7b; --danger-soft: rgba(240,138,123,.15); --radius: 18px; --pill-radius: 10px;
  --shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 70px -28px rgba(0,0,0,.75);
}

@media (prefers-color-scheme: dark) {
  :root[data-app="echo"] {
    --bg: #0f0f10; --card: #1c1c1e; --fg: #f2f2f2; --muted: #9a9aa0; --line: #2c2c2e; --chip: #2c2c2e;
    --primary-ink: #ffa940; --primary-soft: rgba(255,140,0,.2); --danger: #ff6961; --danger-soft: rgba(255,105,97,.16); --shadow: none;
  }
  :root[data-app="play"] {
    --bg: #131418; --card: #26282e; --fg: #edf0f5; --muted: #a3a9b4; --line: #34363d; --chip: #33343c;
    --primary-ink: #6aaeff; --primary-soft: rgba(41,133,245,.2); --danger: #ff7a6f; --danger-soft: rgba(247,84,71,.18); --shadow: none;
  }
  :root[data-app="beacon"] {
    --bg: #0f1115; --card: #171a20; --fg: #e8eaed; --muted: #9aa2ae; --line: #262b34; --chip: #1e222a;
    --primary: #ff6a42; --primary-ink: #ff967b; --primary-soft: #2a1710; --danger: #f26363; --danger-soft: rgba(242,99,99,.15); --shadow: none;
  }
  :root[data-app="yueji"] {
    --bg: #12090d; --card: #22121a; --fg: #fbeff3; --muted: #c9a0b0; --line: #3a1d2a; --chip: #2a1219;
    --primary-ink: #ff9fbe; --primary-soft: #471a2c; --danger: #ff8fa8; --danger-soft: rgba(255,143,168,.14);
    --badge-bg: #471a2c; --badge-fg: #ff9fbe; --shadow: none;
  }
  :root[data-app="cubelife"] {
    --bg: #121212; --card: #1e1e1e; --fg: #ececec; --muted: #9e9e9e; --line: #2c2c2c; --chip: #2a2a2a;
    --primary-ink: #ff6b60; --primary-soft: #3a1513; --danger: #ff7a70; --danger-soft: rgba(255,122,112,.14); --shadow: none;
  }
  :root[data-app="ohdock"] {
    --bg: #070c12; --card: #111c27;
  }
}