/* =============================================================
 * Kirby OpenAPI Portal - 设计 Token 与基础样式
 *
 * 风格：Apple Developer / Notion 取向
 *   · 暖白底 + 柔和阴影 + 大圆角 + 大留白
 *   · 主色冷蓝点缀，副色紫罗兰渐变
 *   · HTTP method 使用低饱和度的语义色
 *
 * 所有设计 Token 集中在此处；新增页面/组件请直接消费 var(--xxx)，
 * 严禁在组件内硬编码颜色 / 字号 / 圆角。
 * ============================================================= */

:root {
  /* —— 颜色（浅色） —— */
  --bg: #fbfaf7;
  --bg-soft: #f4f2ed;
  --surface: #ffffff;
  --surface-2: #f8f7f3;
  --text: #1f2024;
  --text-soft: #3a3c42;
  --muted: #6b6f76;
  --muted-2: #9aa0a6;
  --border: #ececec;
  --border-strong: #dcdcdc;

  /* —— 主色 —— */
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.08);
  --accent-strong: #0066cc;
  --violet: #5e5ce6;
  --hero-grad: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);

  /* —— HTTP method 语义色（低饱和） —— */
  --m-get: #2f8f5a;
  --m-get-bg: rgba(47, 143, 90, 0.08);
  --m-post: #3a6dd9;
  --m-post-bg: rgba(58, 109, 217, 0.08);
  --m-put: #b07410;
  --m-put-bg: rgba(176, 116, 16, 0.1);
  --m-patch: #8a5cf6;
  --m-patch-bg: rgba(138, 92, 246, 0.1);
  --m-delete: #c0383b;
  --m-delete-bg: rgba(192, 56, 59, 0.08);
  --m-head: #6b6f76;
  --m-head-bg: rgba(107, 111, 118, 0.08);

  /* —— Callout 语义色 —— */
  --info: #0a84ff;
  --info-bg: rgba(10, 132, 255, 0.07);
  --warn: #b07410;
  --warn-bg: rgba(176, 116, 16, 0.08);
  --danger: #c0383b;
  --danger-bg: rgba(192, 56, 59, 0.07);
  --success: #2f8f5a;
  --success-bg: rgba(47, 143, 90, 0.08);

  /* —— 字体 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Helvetica Neue", "Segoe UI", "Microsoft YaHei", Inter, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

  /* —— 字号 —— */
  --fz-xs: 12px;
  --fz-sm: 13px;
  --fz-base: 15px;
  --fz-md: 16px;
  --fz-lg: 18px;
  --fz-xl: 22px;
  --fz-h3: 26px;
  --fz-h2: 32px;
  --fz-h1: 44px;
  --fz-hero: 56px;

  /* —— 间距 —— */
  --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;
  --sp-20: 80px;

  /* —— 圆角 —— */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* —— 阴影 —— */
  --shadow-1: 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-2: 0 1px 2px rgba(15, 17, 21, 0.04),
    0 8px 24px rgba(15, 17, 21, 0.04);
  --shadow-pop: 0 8px 24px rgba(15, 17, 21, 0.08),
    0 24px 64px rgba(15, 17, 21, 0.08);

  /* —— 布局 —— */
  --nav-h: 64px;
  --container-max: 1080px;
  --container-wide: 1240px;
}

/* 暗色主题（通过 data-theme="dark" 启用） */
[data-theme="dark"] {
  --bg: #0e0f12;
  --bg-soft: #16181c;
  --surface: #17191e;
  --surface-2: #1f2229;
  --text: #ececec;
  --text-soft: #c8c9cc;
  --muted: #98a0aa;
  --muted-2: #6a7280;
  --border: #2a2c33;
  --border-strong: #393b42;

  --accent: #4ea6ff;
  --accent-soft: rgba(78, 166, 255, 0.12);
  --accent-strong: #74b8ff;

  --m-get-bg: rgba(80, 200, 130, 0.16);
  --m-post-bg: rgba(120, 160, 240, 0.16);
  --m-put-bg: rgba(220, 170, 80, 0.16);
  --m-patch-bg: rgba(180, 140, 250, 0.16);
  --m-delete-bg: rgba(230, 100, 110, 0.16);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* —— 全局 reset —— */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fz-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-strong);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

h1 {
  font-size: var(--fz-h1);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h2 {
  font-size: var(--fz-h2);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h3 {
  font-size: var(--fz-h3);
  line-height: 1.3;
}

h4 {
  font-size: var(--fz-xl);
}

p {
  margin: 0;
  color: var(--text-soft);
}

ul,
ol {
  margin: 0;
  padding-left: 1.4em;
}

li {
  color: var(--text-soft);
  margin: 4px 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--text);
}

pre {
  margin: 0;
  font-family: var(--font-mono);
}

hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: var(--sp-10) 0;
}

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

/* 滚动条（仅 webkit） */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted-2);
}