/* ==========================================================================
   设计 token
   底色与排版取自 apple/DESIGN.md（Apple 官网设计语言），组件结构走 iOS UIKit 惯例。
   浅色 / 深色两套值，通过 <html data-theme="light|dark"> 整体切换。
   ========================================================================== */

/* Inter 作为 SF Pro 的替身（DESIGN.md 推荐的最近开源等价字体）。
   Mac/iOS 命中真 SF Pro，Windows 上回退到这里。
   只含拉丁字形，中文由系统字体渲染。 */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/fonts/inter-latin.woff2') format('woff2');
}

:root {
  /* ---------- 字体 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter Variable', Inter,
    'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter Variable', Inter,
    'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* ---------- 字号（DESIGN.md typography token） ---------- */
  --fs-large-title: 34px; /* display-md */
  --fs-lead: 24px; /* lead-airy */
  --fs-body: 17px; /* body —— Apple 刻意用 17px 而不是 16px */
  --fs-caption: 14px; /* caption */
  --fs-fine: 12px; /* fine-print */
  --fs-mono: 13px;

  --lh-large-title: 1.2;
  --lh-body: 1.47; /* 正文行高，不压到 1.47 以下 */
  --lh-caption: 1.43;
  --lh-fine: 1.3;

  /* 负字距是 Apple 的招牌，17px 以上才用 */
  --ls-large-title: -0.374px;
  --ls-body: -0.374px;
  --ls-caption: -0.224px;
  --ls-fine: -0.12px;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- 间距（8px 基准，DESIGN.md spacing token） ---------- */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 17px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;

  /* ---------- 圆角（只用既定档位，不发明中间值） ---------- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* ---------- 尺寸 ---------- */
  --sidebar-width: 320px;
  --nav-height: 68px;
  --row-height: 68px;
  --avatar-size: 44px;
  --tap-target: 44px;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================ 浅色 ============================ */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --c-primary: #007aff; /* iOS 系统蓝 */
  --c-primary-press: #0062cc;
  --c-primary-soft: rgba(0, 122, 255, 0.12);
  --c-on-primary: #ffffff;
  --c-on-primary-muted: rgba(255, 255, 255, 0.75);

  --c-ink: #1d1d1f; /* 正文主色，来自 DESIGN.md ink */
  --c-secondary: #7a7a7a; /* ink-muted-48 */
  --c-tertiary: #8e8e93; /* iOS systemGray */
  --c-placeholder: #a1a1a6;
  --c-disabled: #c7c7cc;

  --c-canvas: #ffffff;
  --c-grouped-bg: #f5f5f7; /* canvas-parchment，也是 iOS 分组列表底色 */
  --c-surface: #ffffff; /* 分组卡片底色 */
  --c-surface-pearl: #fafafc; /* surface-pearl */
  --c-surface-hover: rgba(0, 0, 0, 0.035);
  --c-surface-active: rgba(0, 0, 0, 0.07);
  --c-fill: rgba(120, 120, 128, 0.12); /* iOS 填充灰，用于搜索框、分段控件底 */
  --c-fill-strong: rgba(120, 120, 128, 0.2);
  --c-fill-solid: #efeff0; /* --c-fill 压在 --c-surface 上的实色版，给自动填充的内阴影用 */

  --c-selection: rgba(0, 122, 255, 0.22); /* 选中文本，替掉系统的蓝底 */

  --c-hairline: #e0e0e0; /* hairline */
  --c-divider: #f0f0f0; /* divider-soft */
  --c-divider-inset: rgba(60, 60, 67, 0.1);

  /* 状态色：已闲置灰 / 进行中蓝 / 已完成绿（iOS system colors） */
  --c-status-todo: #8e8e93;
  --c-status-todo-bg: rgba(142, 142, 147, 0.14);
  --c-status-doing: #007aff;
  --c-status-doing-bg: rgba(0, 122, 255, 0.14);
  --c-status-done: #34c759;
  --c-status-done-bg: rgba(52, 199, 89, 0.16);

  --c-danger: #ff3b30;
  --c-warning: #ff9500;

  /* 头像底色池（按标题哈希取，深浅都够对比度） */
  --c-avatar-1: #007aff;
  --c-avatar-2: #5856d6;
  --c-avatar-3: #af52de;
  --c-avatar-4: #ff2d55;
  --c-avatar-5: #ff9500;
  --c-avatar-6: #34c759;
  --c-avatar-7: #00c7be;
  --c-avatar-8: #30b0c7;

  /* 气泡：本设备发的=微信绿（配深色字），其余=系统蓝。
     绿底上是深色的字/线，所以 own 那几项 muted/code/quote 都是黑系的半透明 */
  --c-bubble-own-bg: #95ec69;
  --c-bubble-own-fg: #111111;
  --c-bubble-own-muted: rgba(0, 0, 0, 0.45);
  --c-bubble-own-code-bg: rgba(0, 0, 0, 0.07);
  --c-bubble-own-quote-border: rgba(0, 0, 0, 0.3);
  --c-bubble-own-link: #0066cc;

  --c-bubble-other-bg: #007aff;
  --c-bubble-other-fg: #ffffff;
  --c-bubble-other-muted: rgba(255, 255, 255, 0.75);
  --c-bubble-other-code-bg: rgba(0, 0, 0, 0.22);
  --c-bubble-other-quote-border: rgba(255, 255, 255, 0.5);
  --c-bubble-other-link: #ffffff;

  /* 代码块用跟随主题的卡片底色，和 highlight.js 主题配套。
     不能跟着气泡颜色走：绿气泡/蓝气泡上压深色底，高亮色会糊得看不清 */
  --c-code-bg: #ffffff;
  --c-code-fg: #24292e;
  --c-code-border: var(--c-hairline);

  --c-overlay: rgba(0, 0, 0, 0.34);

  /* 浮层阴影：DESIGN.md 说全系统只有一处 product-shadow、UI 不用阴影，
     但右键菜单/popover 必须有层次（iOS 原生 context menu 也有）。
     这是对语料库的刻意偏离，仅限浮层使用。 */
  --shadow-popup: 0 4px 16px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--c-hairline);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.22);
}

/* ============================ 深色 ============================ */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* 深色下用 iOS 自己的亮蓝，保证对比度（这是 iOS 原生行为） */
  --c-primary: #0a84ff;
  --c-primary-press: #409cff;
  --c-primary-soft: rgba(10, 132, 255, 0.22);
  --c-on-primary: #ffffff;
  --c-on-primary-muted: rgba(255, 255, 255, 0.75);

  --c-ink: #ffffff;
  --c-secondary: #98989d;
  --c-tertiary: #8e8e93;
  --c-placeholder: #6e6e73;
  --c-disabled: #48484a;

  --c-canvas: #000000;
  --c-grouped-bg: #000000;
  --c-surface: #1c1c1e; /* iOS secondarySystemBackground */
  --c-surface-pearl: #2c2c2e;
  --c-surface-hover: rgba(255, 255, 255, 0.06);
  --c-surface-active: rgba(255, 255, 255, 0.11);
  --c-fill: rgba(120, 120, 128, 0.24);
  --c-fill-strong: rgba(120, 120, 128, 0.36);
  --c-fill-solid: #323236; /* --c-fill 压在 --c-surface 上的实色版，给自动填充的内阴影用 */

  --c-selection: rgba(10, 132, 255, 0.36); /* 选中文本，替掉系统的蓝底 */

  --c-hairline: #38383a;
  --c-divider: #2c2c2e;
  --c-divider-inset: rgba(84, 84, 88, 0.65);

  --c-status-todo: #98989d;
  --c-status-todo-bg: rgba(152, 152, 157, 0.24);
  --c-status-doing: #0a84ff;
  --c-status-doing-bg: rgba(10, 132, 255, 0.24);
  --c-status-done: #30d158;
  --c-status-done-bg: rgba(48, 209, 88, 0.24);

  --c-danger: #ff453a;
  --c-warning: #ff9f0a;

  --c-avatar-1: #0a84ff;
  --c-avatar-2: #5e5ce6;
  --c-avatar-3: #bf5af2;
  --c-avatar-4: #ff375f;
  --c-avatar-5: #ff9f0a;
  --c-avatar-6: #30d158;
  --c-avatar-7: #40c8e0;
  --c-avatar-8: #64d2ff;

  --c-bubble-own-bg: #95ec69;
  --c-bubble-own-fg: #111111;
  --c-bubble-own-muted: rgba(0, 0, 0, 0.45);
  --c-bubble-own-code-bg: rgba(0, 0, 0, 0.07);
  --c-bubble-own-quote-border: rgba(0, 0, 0, 0.3);
  --c-bubble-own-link: #0066cc;

  --c-bubble-other-bg: #0a84ff;
  --c-bubble-other-fg: #ffffff;
  --c-bubble-other-muted: rgba(255, 255, 255, 0.75);
  --c-bubble-other-code-bg: rgba(0, 0, 0, 0.3);
  --c-bubble-other-quote-border: rgba(255, 255, 255, 0.5);
  --c-bubble-other-link: #ffffff; /* DESIGN.md primary-on-dark */

  /* 与 GitHub Dark 高亮主题的底色一致，代码块在两种气泡里都读得清 */
  --c-code-bg: #0d1117;
  --c-code-fg: #c9d1d9;
  --c-code-border: rgba(255, 255, 255, 0.12);

  --c-overlay: rgba(0, 0, 0, 0.6);

  --shadow-popup: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--c-hairline);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
}