/* ==========================================================================
   设计令牌 · 视觉语言对标 apple.com
   原则：内容优先、层级靠字重与灰阶而非色相、材质半透明、动效克制且带阻尼
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- 字体 ---- */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "SF Pro SC",
    "PingFang SC", "Segoe UI Variable Display", "Segoe UI", "Microsoft YaHei UI",
    system-ui, sans-serif;
  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "SF Pro SC",
    "PingFang SC", "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI",
    system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---- 字号（Apple 排版阶梯）---- */
  --fs-caption2: 11px;
  --fs-caption: 12px;
  --fs-footnote: 13px;
  --fs-subhead: 15px;
  --fs-body: 17px;
  --fs-title3: 20px;
  --fs-title2: 24px;
  --fs-title1: 30px;
  --fs-large: 40px;

  /* ---- 字距：大字号收紧，小字号放松 ---- */
  --ls-large: -0.021em;
  --ls-title: -0.018em;
  --ls-body: -0.011em;
  --ls-small: 0em;

  /* ---- 灰度色板 ---- */
  --gray-50: #fbfbfd;
  --gray-100: #f5f5f7;
  --gray-200: #e8e8ed;
  --gray-300: #d2d2d7;
  --gray-400: #aeaeb2;
  --gray-500: #8e8e93;
  --gray-600: #6e6e73;
  --gray-700: #48484a;
  --gray-800: #2c2c2e;
  --gray-900: #1d1d1f;
  --gray-950: #0b0b0d;

  --blue: #0071e3;
  --blue-hover: #0077ed;
  --blue-active: #006edb;
  --orange: #ff9500;
  --red: #ff3b30;
  --green: #34c759;

  /* ---- 间距 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ---- 圆角 ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---- 动效：以阻尼感为主，不用线性 ---- */
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---- 模糊 ---- */
  --blur-chrome: 20px;
  --blur-overlay: 30px;

  /* ---- 尺寸 ---- */
  --sidebar-w: 268px;
  --topbar-h: 52px;
  --content-max: 760px;
  --composer-max: 780px;
}

/* --------------------------- 浅色主题（默认） ---------------------------
   注意：这里只能写 html[data-theme='light']，不能再带上 :root。
   :root 与 html[data-theme='dark'] 特异性相同（都是 0,1,0），而本块位于文件后面，
   带上 :root 会让浅色令牌无条件覆盖深色块——表现为「切换到深色毫无变化」。 */
html[data-theme='light'] {
  --bg: var(--gray-100);
  --surface: #ffffff;
  --surface-2: var(--gray-50);
  --surface-inset: rgba(0, 0, 0, 0.028);

  --chrome: rgba(255, 255, 255, 0.72);
  --chrome-strong: rgba(255, 255, 255, 0.86);
  --overlay: rgba(0, 0, 0, 0.28);
  --overlay-card: rgba(250, 250, 252, 0.86);

  --text-1: var(--gray-900);
  --text-2: #494950;
  --text-3: var(--gray-600);
  --text-4: var(--gray-500);

  --hairline: rgba(0, 0, 0, 0.09);
  --hairline-strong: rgba(0, 0, 0, 0.16);

  --hover: rgba(0, 0, 0, 0.045);
  --pressed: rgba(0, 0, 0, 0.085);
  --selected: rgba(0, 0, 0, 0.06);

  --fill: var(--gray-200);
  --bubble-user: var(--blue);
  --bubble-user-fg: #ffffff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 6px 16px -8px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 32px -12px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1), 0 32px 64px -24px rgba(0, 0, 0, 0.24);

  --scrim: rgba(0, 0, 0, 0.18);
}

/* --------------------------- 深色主题 --------------------------- */
html[data-theme='dark'] {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #161618;
  --surface-inset: rgba(255, 255, 255, 0.055);

  --chrome: rgba(28, 28, 30, 0.66);
  --chrome-strong: rgba(22, 22, 24, 0.86);
  --overlay: rgba(0, 0, 0, 0.56);
  --overlay-card: rgba(38, 38, 41, 0.86);

  --text-1: #f5f5f7;
  --text-2: #c7c7cc;
  --text-3: #98989d;
  --text-4: #8e8e93;

  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.2);

  --hover: rgba(255, 255, 255, 0.07);
  --pressed: rgba(255, 255, 255, 0.13);
  --selected: rgba(255, 255, 255, 0.1);

  --fill: #2c2c2e;
  --bubble-user: #0a84ff;
  --bubble-user-fg: #ffffff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 20px -10px rgba(0, 0, 0, 0.7);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55), 0 16px 40px -16px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.6), 0 40px 80px -32px rgba(0, 0, 0, 0.9);

  --scrim: rgba(0, 0, 0, 0.5);
}