/* ============================================================
   一人公司·从 0 到 1 — 设计系统
   ------------------------------------------------------------
   两套主题 (Apple HIG 标准):
     light  — 默认, 仿 Apple Developer Documentation
     dark   — 仿 Apple developer.apple.com Dark Mode
   并向后兼容历史 localStorage 值:
     studio → dark
     threads / meta / paper / sepia → light
   ============================================================ */

/* ------------------------------------------------------------
   全局 Tokens — 不随主题变化的设计语言
   ------------------------------------------------------------ */
:root {
  /* Type Scale — Apple HIG 翻译为 Web (基准 17px = iOS Body) */
  --text-display: clamp(2.25rem, 1.25rem + 2.5vw, 3.25rem); /* Hero: 36-52px */
  --text-h1:      clamp(1.75rem, 1.25rem + 1.4vw, 2.25rem); /* 章节 H2: 28-36px */
  --text-h2:      clamp(1.375rem, 1rem + 1vw, 1.75rem);     /* 节 H3: 22-28px */
  --text-h3:      clamp(1.125rem, 0.95rem + 0.5vw, 1.3125rem); /* 子节 H4: 18-21px */
  --text-headline: 1.0625rem; /* Headline = Body 加重: 17px */
  --text-body:    1.0625rem;  /* 正文: 17px */
  --text-callout: 0.9375rem;  /* 副文本: 15px */
  --text-footnote: 0.8125rem; /* 注脚: 13px */
  --text-caption: 0.75rem;    /* 标签 / Eyebrow: 12px */

  /* Leading (line-height) */
  --leading-display: 1.07;
  --leading-h:       1.2;
  --leading-body:    1.65;
  --leading-tight:   1.3;
  --leading-loose:   1.85;

  /* Letter spacing — Apple 习惯负值 tracking 在大字号上 */
  --tracking-display: -0.022em;
  --tracking-h:       -0.012em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.08em;

  /* 8pt Grid spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Easing — Apple 标准 spring */
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 0.18s;
  --duration-base: 0.32s;
  --duration-slow: 0.5s;

  /* Reading max-width — 阅读舒适区 (~38 中文字 / ~70 拉丁字符) */
  --measure: 38em;

  /* Font Families
     - display/body: SF Pro 优先, system-ui 兜底, 中文 PingFang
     - serif: 正文长文用, 中文教材传统衬线
     - mono: 代码 */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
    "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code",
    "SFMono-Regular", Consolas, monospace;
}

/* ============================================================
   LIGHT (默认) — Apple Developer Documentation 视觉
   ============================================================ */
:root,
[data-theme="light"],
[data-theme="paper"],
[data-theme="threads"],
[data-theme="meta"],
[data-theme="sepia"] {
  /* 背景层级 */
  --bg: #ffffff;                    /* 主底, Apple white */
  --bg-soft: #fbfbfd;               /* sidebar 底, Apple lightest gray */
  --paper: #ffffff;                 /* 卡片, 与 bg 同 */
  --paper-elevated: #f5f5f7;        /* 抬一档卡片 / 表面 */
  --surface: #f5f5f7;               /* chip / icon-btn 底 */
  --surface-hover: #e8e8ed;

  /* 文字 — Apple 标志 #1d1d1f 偏暖深灰 */
  --ink: #1d1d1f;
  --ink-strong: #000000;
  --ink-soft: #424245;
  --muted: #6e6e73;                 /* Apple system gray */
  --muted-2: #86868b;

  /* 线条 — Apple separator hairline */
  --line: #d2d2d7;
  --line-strong: #b0b0b5;
  --divider: #e5e5ea;

  /* 主色 — Apple Documentation Blue */
  --accent: #0066cc;
  --accent-strong: #0050a3;
  --accent-soft: rgba(0, 102, 204, 0.08);
  --accent-fade: rgba(0, 102, 204, 0.04);
  --accent-ring: rgba(0, 102, 204, 0.35);
  --selection-bg: rgba(0, 122, 255, 0.28); /* Apple system text-selection blue */

  /* 语义色 */
  --quote-bg: #f5f5f7;
  --quote-bar: var(--accent);
  --code-bg: #1d1d1f;               /* 深色代码块 (无论亮模式) */
  --code-ink: #f5f5f7;
  --code-inline-bg: #f5f5f7;
  --code-inline-ink: #c7254e;       /* 类 Apple docs 关键字 */

  /* 6 章色带 — 几乎无饱和, 只是色相微差, 用作锚点不抢戏 */
  --band-1: oklch(50% 0.06 200);
  --band-2: oklch(50% 0.06 245);
  --band-3: oklch(50% 0.06 285);
  --band-4: oklch(50% 0.06 325);
  --band-5: oklch(50% 0.06 35);
  --band-6: oklch(50% 0.06 80);

  /* 阴影 — 几乎不用. Apple 用 hairline + 抬层级 (paper-elevated) 替代 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.08);

  /* 历史变量保留 (向后兼容现有组件引用) */
  --meta-gradient: linear-gradient(135deg, var(--band-2), var(--band-5), var(--band-6));
  --meta-gradient-soft: linear-gradient(135deg, var(--accent-fade), color-mix(in srgb, var(--band-5) 8%, transparent));
  --is-meta: 0;
  --color-scheme: light;
}

/* ============================================================
   DARK — Apple developer.apple.com Dark Mode
   ============================================================ */
[data-theme="dark"],
[data-theme="studio"] {
  /* 背景层级 — Apple 真实 dark 色板 */
  --bg: #000000;
  --bg-soft: #0a0a0a;
  --paper: #1d1d1f;                 /* Apple secondary system bg */
  --paper-elevated: #2c2c2e;        /* Apple tertiary */
  --surface: #2c2c2e;
  --surface-hover: #3a3a3c;

  /* 文字 — Apple light gray on black */
  --ink: #f5f5f7;
  --ink-strong: #ffffff;
  --ink-soft: #a1a1a6;
  --muted: #86868b;
  --muted-2: #48484a;

  /* 线条 — Apple separator dark */
  --line: #38383a;
  --line-strong: #48484a;
  --divider: #2c2c2e;

  /* 主色 — Apple link blue dark */
  --accent: #2997ff;
  --accent-strong: #5fb3ff;
  --accent-soft: rgba(41, 151, 255, 0.14);
  --accent-fade: rgba(41, 151, 255, 0.06);
  --accent-ring: rgba(41, 151, 255, 0.4);
  --selection-bg: rgba(10, 132, 255, 0.45); /* Apple dark-mode selection blue, 更浓以对抗黑底 */

  /* 语义色 */
  --quote-bg: #1d1d1f;
  --quote-bar: var(--accent);
  --code-bg: #0a0a0a;
  --code-ink: #f5f5f7;
  --code-inline-bg: #2c2c2e;
  --code-inline-ink: #ff7b9c;

  /* 6 章色带 — dark 下略提亮, 但仍低饱和 */
  --band-1: oklch(72% 0.06 200);
  --band-2: oklch(72% 0.06 245);
  --band-3: oklch(72% 0.06 285);
  --band-4: oklch(72% 0.06 325);
  --band-5: oklch(72% 0.06 35);
  --band-6: oklch(72% 0.06 80);

  /* 阴影 — dark 下几乎不可见, 主要靠层级抬升传达深度 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6);

  --meta-gradient: linear-gradient(135deg, var(--band-2), var(--band-5), var(--band-6));
  --meta-gradient-soft: linear-gradient(135deg, var(--accent-fade), color-mix(in srgb, var(--band-5) 8%, transparent));
  --is-meta: 1;
  --color-scheme: dark;
}

/* ------------------------------------------------------------
   系统偏好 — 用户没显式选过且系统是 dark 时, 自动用 dark
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #000000;
    --bg-soft: #0a0a0a;
    --paper: #1d1d1f;
    --paper-elevated: #2c2c2e;
    --surface: #2c2c2e;
    --surface-hover: #3a3a3c;
    --ink: #f5f5f7;
    --ink-strong: #ffffff;
    --ink-soft: #a1a1a6;
    --muted: #86868b;
    --muted-2: #48484a;
    --line: #38383a;
    --line-strong: #48484a;
    --divider: #2c2c2e;
    --accent: #2997ff;
    --accent-strong: #5fb3ff;
    --accent-soft: rgba(41, 151, 255, 0.14);
    --accent-fade: rgba(41, 151, 255, 0.06);
    --accent-ring: rgba(41, 151, 255, 0.4);
    --selection-bg: rgba(10, 132, 255, 0.45);
    --quote-bg: #1d1d1f;
    --code-bg: #0a0a0a;
    --code-inline-bg: #2c2c2e;
    --code-inline-ink: #ff7b9c;
    --band-1: oklch(72% 0.06 200);
    --band-2: oklch(72% 0.06 245);
    --band-3: oklch(72% 0.06 285);
    --band-4: oklch(72% 0.06 325);
    --band-5: oklch(72% 0.06 35);
    --band-6: oklch(72% 0.06 80);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6);
    --is-meta: 1;
    --color-scheme: dark;
  }
}

/* 让浏览器知道主题模式 (滚动条/表单控件用对色) */
:root { color-scheme: light; }
:root:has([data-theme="dark"]),
[data-theme="dark"],
[data-theme="studio"] { color-scheme: dark; }