/* Briskkit — 设计系统 token（单一事实来源）
 *
 * 三个页面（index / privacy / upgrade-success）共用这一份。
 * 页面自己的 CSS 只能【引用】这里的名字，不许再写裸颜色值或裸 font-family。
 * 要一个这里没有的值，先在本文件加一个具名 token，再去引用它。
 *
 * 系统说明见 design.md。生成自 hallmark（Nutlope/hallmark）· 2026-07-25。
 */

:root {
  /* ══ 颜色 · OKLCH · 深色 · anchor hue 210/175 ══
   * 深色下抬高层级用【亮度】，不用阴影光晕。
   * 对比度实测（WCAG 2.1，canvas 取真实 sRGB 像素）：
   *   ink/paper 16.8 · muted/paper 7.6 · muted/paper-3 6.4 · accent/paper 9.5
   * 正文门槛 4.5，焦点环门槛 3.0，全部通过。 */
  --color-paper:      oklch(16%   0.014 210);   /* 底 */
  --color-paper-2:    oklch(20.5% 0.016 210);   /* 抬一级：卡片 */
  --color-paper-3:    oklch(24%   0.018 210);   /* 抬两级：hover */
  --color-rule:       oklch(31%   0.015 210);   /* 分隔线 */
  --color-muted:      oklch(71%   0.013 200);   /* 次要文字 */
  --color-ink:        oklch(95%   0.007 185);   /* 正文 */
  --color-accent:     oklch(76%   0.135 175);   /* 唯一强调色：链接/箭头/标记 */
  --color-accent-ink: oklch(18%   0.020 185);   /* accent 作底时的文字色 */
  --color-focus:      oklch(74%   0.155 230);   /* 焦点环 */

  /* ══ 品牌标记 · 原版彩虹 conic 的六个色标 ══
   * ⚠ 这个 conic 有 7 个色标且含 indigo→purple，踩了 hallmark 的
   *   gate 2 与「渐变最多两色标」。用户明确决定保留 —— 品牌识别优先。
   *   已记录，不当作全过。改动品牌标记前先看 design.md。 */
  --brand-teal:   oklch(70% 0.130 180);   /* #14b8a6 */
  --brand-sky:    oklch(70% 0.150 232);   /* #0ea5e9 */
  --brand-indigo: oklch(58% 0.190 277);   /* #6366f1 */
  --brand-purple: oklch(62% 0.210 300);   /* #8b5cf6 */
  --brand-amber:  oklch(77% 0.160  70);   /* #f59e0b */
  --brand-green:  oklch(74% 0.190 148);   /* #22c55e */

  /* ══ 字体 · 2 个家族（上限 3）══
   * 标题一律 roman（font-style: normal）—— 斜体标题是最好认的 AI 痕迹之一。 */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Newsreader", ui-serif, Georgia, serif;
  /* outlier —— 只用于「机器串」这一个角色：<code> 和 license key。
     系统栈，不额外加载字体。按 2+1 规则这是第三个也是最后一个家族。 */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ══ 字号 · 1.25 大三度 ══ */
  --text-xs:      0.8rem;
  --text-sm:      0.95rem;
  --text-base:    1.0625rem;
  --text-md:      1.1875rem;
  --text-lg:      1.4375rem;
  --text-xl:      1.875rem;
  --text-2xl:     2.375rem;
  --text-display: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);

  /* ══ 间距 · 4pt 刻度 ══ */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem;  --space-xs: 0.75rem;
  --space-sm:  1rem;    --space-md:  1.5rem;  --space-lg: 2rem;
  --space-xl:  3rem;    --space-2xl: 4.5rem;  --space-3xl: 7rem;

  /* ══ 形状与动效 ══ */
  --radius-block: 4px;
  --radius-mark:  8px;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 180ms;
}

/* ══ 全站基线 ══ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* clip 而非 hidden —— hidden 会破坏后代的 position: sticky/fixed */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-weight: 350;                 /* 深色下的视觉补偿：浅字在深底上显胖 */
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: 1060px; margin: 0 auto; padding: 0 var(--space-md); }

/* ══ 品牌标记 + 字标（三页共用，必须一模一样）══ */
.wordmark {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-md); letter-spacing: -0.02em;
  color: var(--color-ink); line-height: 1; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
}
.wordmark .mark {
  width: 26px; height: 26px; flex: none; border-radius: var(--radius-mark);
  background: conic-gradient(from 140deg,
    var(--brand-teal), var(--brand-sky), var(--brand-indigo),
    var(--brand-purple), var(--brand-amber), var(--brand-green), var(--brand-teal));
}
a.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ══ 页尾 · Ft4 密排版权行（三页共用）══ */
.colophon {
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-lg);
  padding: var(--space-xl) var(--space-2xs) var(--space-2xl);
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  align-items: baseline; justify-content: space-between;
  font-size: var(--text-sm); color: var(--color-muted);
}

/* ══ 链接语气（三页共用）══ */
.link {
  color: var(--color-muted); text-decoration: none;
  border-bottom: 1px solid var(--color-rule); white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.link:hover  { color: var(--color-accent); border-color: var(--color-accent); }
.link:active { color: var(--color-ink); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ══ 减少动效：位移一律塌缩，焦点环不受影响（它本来就不该有过渡）══ */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}