/*
 * 设计 token：HALO 定稿规格（PLAN §6.2）。颜色、字体、字号、间距、圆角、缓动与时长只在这里定义，
 * 页面与组件一律引用（panel/test/design.test.ts 扫描 CSS 与 JSX 里的硬编码色值，并逐对实测对比度）。
 * 深浅两套：/static/theme.js 在首屏渲染前给 <html> 设 data-theme（light | dark）；没有 data-theme 时按浅色渲染。
 * prefers-contrast / prefers-reduced-transparency / prefers-reduced-motion 的调整也在这里。
 */

@font-face {
  /* 非 Apple 设备的等宽字回退（PLAN §6.2）：Apple 设备上 SF Mono 排在它前面，零下载；
   * unicode-range 只覆盖 Latin 子集，中文字符不会触发下载，font-display: swap 不阻塞渲染 */
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* 背景与层级：分组背景 / 卡片 / 抬升层（PLAN §6.2） */
  --bg: #f2f2f7;
  --surface: #ffffff;
  --elevated: #ffffff;
  /* 文字：主 / 次 / 三级。三级只用于装饰性重复标签（对比度不达标，见 docs/design/README.md） */
  --text-1: #1c1c1e;
  --text-2: rgb(60 60 67 / 75%);
  --text-3: rgb(60 60 67 / 30%);
  /* 分隔线（§6.2 的 29%）与更细的描边 */
  --sep: rgb(60 60 67 / 29%);
  --hairline: rgb(60 60 67 / 9%);
  --card-border: rgb(60 60 67 / 10%);
  /* 强调（系统蓝）§6.2；accent-text 是文字用的加深版（AA），accent-strong 是填充按钮底（白字 AA） */
  --accent: #007aff;
  --accent-text: #0060c9;
  --accent-strong: #006edc;
  --accent-soft: rgb(0 122 255 / 12%);
  --accent-border: rgb(0 122 255 / 32%);
  /* 状态色（§6.2）：色块用原色，文字用加深版（AA）；soft 是淡底 */
  --ok: #34c759;
  --ok-text: #217a37;
  --ok-soft: rgb(52 199 89 / 16%);
  --ok-border: rgb(52 199 89 / 40%);
  --warn: #ff9500;
  --warn-text: #c93400;
  --warn-soft: rgb(255 149 0 / 16%);
  --warn-border: rgb(255 149 0 / 45%);
  --danger: #ff3b30;
  --danger-text: #d70015;
  --danger-strong: #d70015;
  --danger-soft: rgb(255 59 48 / 12%);
  --danger-border: rgb(255 59 48 / 35%);
  /* 淡底上的强调文字（胶囊、提示条）：深色下要换成白色才够对比度 */
  --tint-accent-fg: #0060c9;
  /* 填充按钮上的文字 */
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  /* 图表 1–4（§6.2；浅色 chart-3 按 3:1 非文本对比度加深） */
  --chart-1: #007aff;
  --chart-2: #5856d6;
  --chart-3: #2e96aa;
  --chart-4: #af52de;
  --chart-1-soft: rgb(0 122 255 / 12%);
  --chart-2-soft: rgb(88 86 214 / 10%);
  --chart-3-soft: rgb(46 150 170 / 10%);
  --chart-4-soft: rgb(175 82 222 / 10%);
  /* 控件填充：1 最淡（悬停/四层）、2 次层、3 拇指/抓杆 */
  --fill-1: rgb(60 60 67 / 6%);
  --fill-2: rgb(60 60 67 / 12%);
  --fill-3: rgb(60 60 67 / 20%);
  --hover: rgb(60 60 67 / 8%);
  /* 对话框遮罩与焦点环（焦点环按非文本 3:1 校验） */
  --scrim: rgb(0 0 0 / 40%);
  --focus-ring: #007aff;
  /* 导航层毛玻璃（§6.1：材质只用在导航层）；prefers-reduced-transparency 时换成实底 */
  --glass-bg: rgb(242 242 247 / 72%);
  --glass-blur: saturate(180%) blur(20px);
  --glass-border: rgb(255 255 255 / 60%);

  /* 字体（§6.2）：中文用系统字体；等宽链最后才轮到自托管的 JetBrains Mono */
  --font-ui:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
    "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "JetBrains Mono", monospace;

  /* 字号阶梯（§6.2：iOS 文字样式；Mac 基准 14，iPhone 基准 17 见下方媒体查询） */
  --fs-large-title: 34px;
  --fs-title-1: 28px;
  --fs-title-2: 22px;
  --fs-headline: 17px;
  --fs-body: 14px;
  --fs-subheadline: 15px;
  --fs-footnote: 13px;
  --fs-caption: 12px;
  --fs-caption-2: 11px;
  --fs-code: 13px;
  --fw-strong: 600;
  --fw-head: 700;
  --lh-body: 1.45;
  --lh-tight: 1.2;
  --track-title: -0.02em;
  --track-eyebrow: 0.08em;

  /* 间距：4 的倍数（§6.2） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* 圆角（§6.2）：卡片 14、控件 9、胶囊；control-inner 是分段控件拇指 */
  --r-card: 14px;
  --r-control: 9px;
  --r-control-inner: 7px;
  --r-pill: 999px;
  --r-sheet: 14px;
  --r-mark: 4px;

  /* 缓动与时长（§6.5）：sheet / 弹出层 320ms，按下与悬停 130ms；linear() 近似 spring（带轻微回弹） */
  --dur-press: 130ms;
  --dur-hover: 130ms;
  --dur-pop: 200ms;
  --dur-sheet: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: linear(
    0,
    0.199 6.2%,
    0.4 12.9%,
    0.6 20.4%,
    0.743 26.6%,
    0.849 33.3%,
    0.917 40.4%,
    0.954 47.9%,
    0.972 55.7%,
    0.98 63.9%,
    0.994 72.3%,
    1.006 80.9%,
    1.005 89.3%,
    1 100%
  );

  /* 布局尺寸（§6.3 / §6.4，layout.css 用）：Mac 侧栏 240、中等宽度的图标栏、≥ 1280 的检查器栏；
   * 工具栏 52（macOS 统一工具栏的高度）、iPhone 导航栏 44 与浮动标签栏 56；内容区最大宽度 */
  --sidebar-w: 240px;
  --rail-w: 72px;
  --inspector-w: 320px;
  --toolbar-h: 52px;
  --navbar-h: 44px;
  --tabbar-h: 56px;
  --tabbar-max: 480px;
  --content-max: 1200px;

  /* 阴影 */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-seg: 0 1px 3px rgb(0 0 0 / 12%), 0 0 0 0.5px rgb(0 0 0 / 4%);
  --shadow-menu: 0 10px 30px rgb(0 0 0 / 14%);
  --shadow-sheet: 0 30px 70px rgb(0 0 0 / 18%), 0 0 0 0.5px rgb(0 0 0 / 10%);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --surface: #1c1c1e;
  --elevated: #2c2c2e;
  --text-1: #ffffff;
  --text-2: rgb(235 235 245 / 60%);
  --text-3: rgb(235 235 245 / 30%);
  --sep: rgb(84 84 88 / 60%);
  --hairline: rgb(84 84 88 / 32%);
  --card-border: rgb(84 84 88 / 36%);
  --accent: #0a84ff;
  --accent-text: #0a84ff;
  --accent-strong: #0a6de0;
  --accent-soft: rgb(10 132 255 / 24%);
  --accent-border: rgb(10 132 255 / 40%);
  --ok: #30d158;
  --ok-text: #30d158;
  --ok-soft: rgb(48 209 88 / 16%);
  --ok-border: rgb(48 209 88 / 40%);
  --warn: #ff9f0a;
  --warn-text: #ffd60a;
  --warn-soft: rgb(255 159 10 / 16%);
  --warn-border: rgb(255 159 10 / 45%);
  --danger: #ff453a;
  --danger-text: #ff6961;
  --danger-strong: #b02621;
  --danger-soft: rgb(255 69 58 / 16%);
  --danger-border: rgb(255 69 58 / 40%);
  --tint-accent-fg: #ffffff;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --chart-1: #0a84ff;
  --chart-2: #5e5ce6;
  --chart-3: #40c8e0;
  --chart-4: #bf5af2;
  --chart-1-soft: rgb(10 132 255 / 24%);
  --chart-2-soft: rgb(94 92 230 / 22%);
  --chart-3-soft: rgb(64 200 224 / 22%);
  --chart-4-soft: rgb(191 90 242 / 22%);
  --fill-1: rgb(235 235 245 / 10%);
  --fill-2: rgb(235 235 245 / 16%);
  --fill-3: rgb(235 235 245 / 26%);
  --hover: rgb(235 235 245 / 12%);
  --scrim: rgb(0 0 0 / 60%);
  --focus-ring: #0a84ff;
  --glass-bg: rgb(28 28 30 / 70%);
  --glass-blur: saturate(180%) blur(20px);
  --glass-border: rgb(255 255 255 / 12%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-seg: 0 1px 3px rgb(0 0 0 / 40%), 0 0 0 0.5px rgb(0 0 0 / 20%);
  --shadow-menu: 0 10px 30px rgb(0 0 0 / 50%);
  --shadow-sheet: 0 30px 70px rgb(0 0 0 / 60%), 0 0 0 0.5px rgb(0 0 0 / 40%);
}

/* iPhone / 触摸（< 768px）：正文 17px（PLAN §6.2 的 iOS Body），代码同步放大 */
@media (max-width: 767px) {
  :root {
    --fs-body: 17px;
    --fs-code: 15px;
  }
}

/* 对比度偏好：分隔线与边框加深（PLAN §6.2） */
@media (prefers-contrast: more) {
  :root {
    --sep: rgb(60 60 67 / 60%);
    --hairline: rgb(60 60 67 / 24%);
    --card-border: rgb(60 60 67 / 18%);
  }
  :root[data-theme="dark"] {
    --sep: rgb(84 84 88 / 92%);
    --hairline: rgb(84 84 88 / 60%);
    --card-border: rgb(84 84 88 / 48%);
  }
}

/* 减少透明：毛玻璃换成实底（PLAN §6.2） */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: #f2f2f7;
    --glass-blur: none;
  }
  :root[data-theme="dark"] {
    --glass-bg: #1c1c1e;
  }
}

/* 减少动效：时长归零，所有过渡立即完成（PLAN §6.5；动画在 components.css 里关） */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-hover: 0ms;
    --dur-pop: 0ms;
    --dur-sheet: 0ms;
  }
}

/* —— 基础元素（只引用上面的 token） —— */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font: var(--fs-body) / var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-ui);
  letter-spacing: var(--track-title);
}

h1 {
  font-size: var(--fs-title-2);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-headline);
  font-weight: var(--fw-strong);
  line-height: var(--lh-tight);
}

h3 {
  font-size: var(--fs-subheadline);
  font-weight: var(--fw-strong);
  line-height: var(--lh-tight);
}

p {
  margin: 0;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
}

/* 键盘焦点：所有可交互元素统一的焦点环（非文本对比度 ≥ 3:1） */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

::selection {
  background: var(--accent-soft);
}

/* 等宽文本与等宽数位（§6.2 / §9.2） */
.mono {
  font-family: var(--font-mono);
}

.num {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font: var(--fw-strong) var(--fs-caption-2) / 1 var(--font-mono);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}

/* 毛玻璃材质：只用于导航层（§6.1）；透明度偏好把 token 换成实底 */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}