/* 设计令牌。色值刻意对齐原生侧既有的 GitHub Dark 配色
   （原 activity_main.xml 的硬编码色），保证 H5 与通知栏、系统栏不割裂。

   字号/间距用 clamp() 做流式缩放：一个视口宽度区间内连续变化，
   不做断点跳变，因此手机、平板、桌面浏览器共用同一套值。

   每条 clamp 前面都先写一个普通值作为兜底：不支持 clamp() 的老
   Android System WebView（Chrome 79 以下）会忽略非法声明、保留兜底值。
   这是渐进增强，不需要 JS 参与。 */

:root {
  /* 让浏览器把原生控件（滚动条、输入光标、日期选择）也按深色画 */
  color-scheme: dark;

  /* ---- 颜色 ---- */
  --bg: #0D1117;
  --surface: #161B22;
  --surface-2: #21262D;
  --border: #30363D;
  --text: #E6EDF3;
  --text-dim: #8B949E;
  --primary: #1F6FEB;
  --primary-dim: #1F6FEB33;

  /* 踩在彩色底上的文字（主按钮、开关滑块、选中段）——
     深色下都是白色，浅色下只有主按钮需要换，所以单独成一档 */
  --on-accent: #FFFFFF;

  /* 蓝色系读数（真空度那一格）。浅色底上要更深，否则发飘 */
  --tone-blue: #4CB3FF;

  /* 三种语义色的**底色**（badge）。深色下是低透明度叠加，浅色下要更淡 */
  --ok-bg: rgba(63, 185, 80, .15);
  --warn-bg: rgba(255, 176, 32, .15);
  --err-bg: rgba(248, 81, 73, .15);

  /* 阴影与遮罩：浅色下"黑压压"的阴影会很脏，所以两套分开给 */
  --shadow: 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-strong: 0 10px 28px rgba(0, 0, 0, .55);
  --overlay: rgba(0, 0, 0, .55);

  /* 连接状态色，与 MqttService 的状态字符串一一对应 */
  --st-connected: #3FB950;
  --st-connecting: #FFB020;
  --st-error: #F85149;
  --st-disconnected: #6E7681;

  /* ---- 圆角：沿用原生的 8dp / 16dp 两档 ---- */
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* ---- 流式字号 ---- */
  --fs-xs: 11px;
  --fs-xs: clamp(11px, 2.9vw, 13px);
  --fs-sm: 13px;
  --fs-sm: clamp(12px, 3.2vw, 14px);
  --fs-base: 15px;
  --fs-base: clamp(14px, 3.7vw, 16px);
  --fs-lg: 17px;
  --fs-lg: clamp(16px, 4.4vw, 19px);
  --fs-xl: 22px;
  --fs-xl: clamp(20px, 5.6vw, 26px);

  /* ---- 流式间距 ---- */
  --gap-xs: 4px;
  --gap-xs: clamp(4px, 1.2vw, 6px);
  --gap-sm: 8px;
  --gap-sm: clamp(8px, 2.2vw, 12px);
  --gap: 14px;
  --gap: clamp(12px, 3.2vw, 16px);
  --gap-lg: 20px;
  --gap-lg: clamp(16px, 4.4vw, 24px);

  /* ---- 骨架尺寸 ---- */
  --topbar-h: 50px;
  --topbar-h: clamp(48px, 12vw, 60px);
  --tabbar-h: 56px;
  --tabbar-h: clamp(52px, 13vw, 64px);

  /* 大屏下限制内容宽度，避免卡片被拉散 */
  --max-w: 720px;

  /* 最小可点按尺寸（无障碍） */
  --tap: 44px;
}

/* ---- 浅色（`html[data-theme="light"]`，由 js/core/theme.js 打上）----
 *
 * 只覆盖**颜色**令牌；字号/圆角/间距两套主题共用（与明暗无关）。
 * 取值对齐 GitHub Light，与深色那套同一血统，切换时观感不跳。
 */
html[data-theme="light"] {
  color-scheme: light;

  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #EAEEF2;
  --border: #D0D7DE;
  --text: #1F2328;
  --text-dim: #656D76;
  --primary: #0969DA;
  --primary-dim: rgba(9, 105, 218, .14);

  --on-accent: #FFFFFF;
  --tone-blue: #0550AE;

  --ok-bg: rgba(26, 127, 55, .12);
  --warn-bg: rgba(154, 103, 0, .12);
  --err-bg: rgba(207, 34, 46, .12);

  --shadow: 0 6px 20px rgba(31, 35, 40, .12);
  --shadow-strong: 0 10px 28px rgba(31, 35, 40, .18);
  --overlay: rgba(31, 35, 40, .35);

  --st-connected: #1A7F37;
  --st-connecting: #9A6700;
  --st-error: #CF222E;
  --st-disconnected: #8C959F;
}