/* ==========================================================================
   拾贝 LinkMaw · 设计令牌（全站唯一来源）
   --------------------------------------------------------------------------
   官网 10 页与教程站 53 页都从这一份取值，页面样式只做布局，不再自定义颜色、
   字号、间距。改这里，全站同步。

   约束（landing-page-design 规范）：
   · 只用一套主字 Manrope，不用斜体，字重上限 700
   · 字号只落在 12/14/16/18/20/24/30/36/48/60/72/96
   · 间距只落在 2/4/8/12/16/24/32/40/48/64/80/96
   · 圆角只用 4/8/12/16/24
   · 背景一律纯色，唯一允许的渐变是 Hero 标题文字本身
   · 动效统一 cubic-bezier(.22,1,.36,1)，只动 transform 与 opacity
   ========================================================================== */

:root {
  /* ── 品牌 ─────────────────────────────────────────────────────────── */
  --brand: #b8f24f;
  --brand-2: #9be02a;
  --brand-on: #0a0a0a;
  /* 浅底上的品牌文字色：荧光绿对比度只有 1.2，必须压深后使用 */
  --brand-ink: #3d6b00;
  --brand-soft: #f4fbdd;
  --brand-line: #dcf0a8;

  /* ── 中性色 · 浅色主题 ─────────────────────────────────────────────── */
  --ink: #0a0a0a;
  --ink-2: #4a4a4a;
  --muted: #737373;
  --line: #e6e6e6;
  --line-2: #f0f0f0;

  --bg: #ffffff;
  --bg-soft: #fafafa;
  --surface: #ffffff;
  --surface-2: #f5f5f5;

  /* ── 中性色 · 深色主题（只允许这几个底色）────────────────────────── */
  --dark: #000000;
  --dark-1: #181818;
  --dark-2: #1f1f1f;
  --dark-3: #272727;
  --dark-4: #313131;
  --dark-ink: #ffffff;
  --dark-ink-2: #b4b4b4;
  --dark-muted: #8a8a8a;

  /* ── 状态色 ───────────────────────────────────────────────────────── */
  --green: #1f7a45;
  --red: #b3261e;
  --blue: #1f5f9c;
  --amber: #8a5a00;

  --green-soft: #eaf7ef;
  --red-soft: #fdeeed;
  --blue-soft: #eef5fc;
  --amber-soft: #fdf4e3;

  /* ── 字体 ─────────────────────────────────────────────────────────── */
  --f-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  /* 等宽只用于代码、版本号、计量数字 */
  --f-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
    Consolas, monospace;

  /* ── 字号阶（与行高成对，取自 Tailwind 默认档）────────────────────── */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: 18px;
  --t-xl: 20px;
  --t-2xl: 24px;
  --t-3xl: 30px;
  --t-4xl: 36px;
  --t-5xl: 48px;
  --t-6xl: 60px;
  --t-7xl: 72px;
  --t-8xl: 88px;
  --t-9xl: 96px;

  --lh-xs: 16px;
  --lh-sm: 20px;
  --lh-base: 24px;
  --lh-lg: 28px;
  --lh-xl: 28px;
  --lh-2xl: 32px;
  --lh-3xl: 36px;
  --lh-4xl: 40px;
  --lh-7xl: 76px;
  --lh-8xl: 92px;
  --lh-9xl: 100px;

  /* ── 间距 ─────────────────────────────────────────────────────────── */
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* ── 圆角 ─────────────────────────────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 9999px;
  --radius: 12px; /* 兼容旧样式里的 --radius */

  /* ── 动效 ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 300ms;
  --dur: 500ms;
  --dur-slow: 700ms;

  /* ── 投影（克制，只在需要提层的地方用）────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-2: 0 2px 4px rgba(10, 10, 10, 0.03), 0 12px 32px rgba(10, 10, 10, 0.06);
  --shadow-3: 0 4px 8px rgba(10, 10, 10, 0.05), 0 24px 64px rgba(10, 10, 10, 0.12);
  --shadow: var(--shadow-1); /* 兼容旧样式 */

  /* ── 布局 ─────────────────────────────────────────────────────────── */
  --wrap: 1180px;
  /* 首页 Hero 是"舞台"，比正文容器宽 100px：标题能撑到 96px 而不挤掉右侧面板，
     正文区块仍用 --wrap，保持阅读区不散。这是刻意的两级容器，不是遗漏。 */
  --wrap-hero: 1280px;
  --sh-h: 64px; /* 胶囊导航高度 */
  --sh-off: 12px; /* 胶囊离视口顶部的距离 */
  --sh-total: 88px; /* 页面内容实际起点 = 64 + 12 + 12 */
}

/* 教程站的深色模式：只重映射语义变量，深色底色全部取自规范允许的五个值 */
html[data-theme='dark'] {
  --ink: #ffffff;
  --ink-2: #b4b4b4;
  --muted: #8a8a8a;
  --line: #272727;
  --line-2: #1f1f1f;

  --bg: #000000;
  --bg-soft: #181818;
  --surface: #000000;
  --surface-2: #181818;

  --brand-ink: #b8f24f;
  --brand-soft: #1a2013;
  --brand-line: #2f3d1c;

  --green: #6fdca0;
  --red: #ff8f87;
  --blue: #8ec2f5;
  --amber: #f0c26a;

  --green-soft: #14231a;
  --red-soft: #2a1918;
  --blue-soft: #16222e;
  --amber-soft: #2a2318;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   基础重置
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* 胶囊导航是 fixed，用 body 内边距把内容推到它下面 */
  padding-top: var(--sh-total);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* 首页的深色 Hero 要顶到视口上边缘，导航浮在它上面 */
body.home {
  padding-top: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

::selection {
  background: var(--brand);
  color: var(--brand-on);
}

/* 可访问性：键盘焦点必须看得见 */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 跳转正文：键盘用户第一个 Tab 就能看到 */
.skip {
  position: fixed;
  left: var(--s-300);
  top: -80px;
  z-index: 200;
  padding: var(--s-75) var(--s-200);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}

.skip:focus {
  top: var(--s-200);
}

/* 深色容器里需要反转文字色时，用这个类把语义变量换掉 */
.on-dark {
  --ink: var(--dark-ink);
  --ink-2: var(--dark-ink-2);
  --muted: var(--dark-muted);
  --line: var(--dark-3);
  --line-2: var(--dark-2);
  --bg: var(--dark);
  --bg-soft: var(--dark-1);
  --surface: var(--dark-1);
  --brand-ink: var(--brand);
  --brand-soft: #1a2013;
  --brand-line: #2f3d1c;
  color: var(--ink);
  background: var(--dark);
}

/* 等宽小标签：版本号、章节编号、计量单位 */
.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* 滚动条（WebKit）：细、静音，不抢视觉 */
@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 32%, transparent);
    border-radius: var(--r-full);
    border: 3px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--muted) 55%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}