/* ============================================================================
 * visorn.dev — 预热页样式
 *
 * 视觉语言直接采用 shadcn/ui 的 **neutral** 主题：整套 token 的 chroma 全为 0，
 * 所以配色天然是纯黑 / 白 / 灰，没有品牌色、没有渐变、没有阴影。变量名与取值
 * 对齐 shadcn 默认主题（Light / Dark），只按本站用法删掉了用不到的条目。
 *
 * 依然刻意零依赖 / 零 JS / 零网络字体：
 *   - 无框架 → 没有 node_modules、没有构建链，`dist/` 就是最终产物；
 *   - 无网络字体 → 零第三方请求，没有 FOUT / CLS；
 *   - 无 JavaScript → 主题跟随 `prefers-color-scheme`，导航在窄屏自然换行。
 *
 * 产品**尚未发布**：页面上不出现版本号、下载按钮、截图、功能矩阵。版本号只写在
 * HTML 的 `<meta name="visorn-version">` 里，供构建脚本注入与线上校验用，不上屏。
 * ========================================================================== */

/* ── shadcn/ui neutral tokens ────────────────────────────────────────────── */

/* Light。`1 0 0` / `0.145 0 0` 的第三位（chroma）是 0 —— 这就是「黑白」的由来，
   不是把某个彩色调暗得来的。改配色请连同 chroma 一起保持 0。 */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  --radius: 0.625rem;
  --wrap: 880px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
}

/* Dark。品牌字标是白色，`#09090b` 也是 wiki 主色，所以深色同样是「正牌」主题，
   不是浅色的附属。`oklch(1 0 0 / 10%)` 用半透明边框，是为了让边界在纯黑底上
   仍然是可感知但不刺眼的一根线。 */
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --border: oklch(1 0 0 / 10%);
    --ring: oklch(0.556 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
  }
}

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
dl,
dd,
figure {
  margin: 0;
}

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

svg {
  display: block;
}

/* 全站唯一的交互反馈：150ms 的颜色过渡。刻意不引入位移动画 ——
   预热页没有需要靠动效解释的状态变化。 */
@media (prefers-reduced-motion: no-preference) {
  a,
  .btn {
    transition:
      color 150ms ease-out,
      background-color 150ms ease-out,
      border-color 150ms ease-out;
  }
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ── layout ──────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.5rem 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand svg {
  height: 20px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  font-size: 0.875rem;
}

.nav a {
  color: var(--muted-foreground);
}

.nav a:hover {
  color: var(--foreground);
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(3.5rem, 12vh, 7rem) clamp(3rem, 9vh, 5rem);
}

/* 状态徽标。没有背景色是刻意的：`--muted` 在深色下偏亮，会让一行 12px 的状态
   文案抢走 h1 的注意力；一根发丝线足够表达「这是一个标注」。 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

h1 {
  margin-top: 1.25rem;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lede {
  margin-top: 1.25rem;
  max-width: 58ch;
  font-size: 1.0625rem;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.fineprint {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* ── button（shadcn Button：default / outline 两个变体）──────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding-inline: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-outline {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
}

.btn-outline:hover {
  background: var(--muted);
}

/* ── section ─────────────────────────────────────────────────────────────── */
.section {
  padding-block: clamp(2.5rem, 7vh, 4rem);
  border-top: 1px solid var(--border);
}

h2 {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* 说明清单。用 `<dl>` 而非卡片网格：预热页只有四条事实，卡片会把它撑成
   「功能矩阵」，与「不要多余信息」相悖。发丝分隔线足够表达分组。 */
.specs > div {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 1.125rem;
  border-top: 1px solid var(--border);
}

.specs > div:first-child {
  margin-top: 1.5rem;
}

.specs dt {
  font-size: 0.9375rem;
  font-weight: 500;
}

.specs dd {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* 宽屏把术语放左栏，形成可扫读的两列；窄屏堆叠，不引入任何折行控制。 */
@media (min-width: 640px) {
  .specs > div {
    grid-template-columns: 11rem 1fr;
  }
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-inner svg {
  height: 16px;
  width: auto;
  color: var(--muted-foreground);
}

.footer-meta {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
}

.footer-links a {
  color: var(--muted-foreground);
}

.footer-links a:hover {
  color: var(--foreground);
}