/* ===========================================================================
   云梭下载器 — Design Tokens
   科学人文主义：科技严谨精密 + 人文微妙温度
   =========================================================================== */

:root {
  /* ---------- 色彩：核心品牌蓝为主轴，中性灰阶承载信息 ---------- */
  --brand-blue: #2b5ce6;        /* 主色：引导焦点 */
  --brand-blue-600: #1f49c4;    /* 按压 / 强调 */
  --brand-blue-100: #e8eefc;    /* 浅蓝底 */
  --brand-blue-050: #f4f7fe;    /* 极浅蓝底 */
  --ink-blue: #101a3d;          /* 蓝调墨色：深色区块主色 */

  --grey-900: #14161a;          /* 主标题 */
  --grey-700: #35383f;          /* 次级正文 */
  --grey-500: #666b76;          /* 辅助信息 */
  --grey-400: #8c919d;          /* 弱化信息 */
  --grey-300: #c6cad2;          /* 分隔线 / 占位 */
  --grey-200: #e3e6eb;          /* 弱分割线 */
  --grey-100: #f1f3f6;          /* 浅底 */
  --grey-050: #f7f8fa;          /* 近白底 */
  --paper: #ffffff;             /* 页面底色 */
  --paper-warm: #fcfcfb;        /* 微暖纸面，给人文留一点温度 */

  /* ---------- 语义色（克制使用，仅作状态提示） ---------- */
  --ok: #1f9d63;
  --ok-soft: #e9f6ef;
  --warn: #b4761b;

  /* ---------- 字体 ---------- */
  --font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Sentient", "Noto Serif SC", "Songti SC", "Source Han Serif SC",
    Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "Cascadia Code", Consolas,
    "SFMono-Regular", monospace;

  /* ---------- 字号层级：标题大而稳，正文小而清 ---------- */
  --fs-display: 76px;
  --fs-h1: 60px;
  --fs-h2: 40px;
  --fs-h3: 22px;
  --fs-h4: 17px;
  --fs-body: 15px;
  --fs-sm: 13.5px;
  --fs-xs: 12px;
  --fs-mono: 13px;
  --fs-label: 11.5px;

  --lh-tight: 1.12;
  --lh-snug: 1.38;
  --lh-body: 1.75;

  --ls-display: -0.028em;
  --ls-tight: -0.015em;
  --ls-mono: 0.02em;

  /* ---------- 间距（8px 基准，模块之间用充足垂直间距分隔） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;
  --sp-12: 192px;

  /* ---------- 版式：12 列基础网格 ---------- */
  --grid-cols: 12;
  --gutter: 24px;
  --page-x: 40px;
  --max-w: 1200px;
  --max-w-wide: 1360px;

  /* ---------- 形状：克制圆角、不重阴影 ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-full: 999px;

  /* ---------- 动效：克制顺滑，200–400ms ---------- */
  --dur-fast: 200ms;
  --dur-base: 280ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --hairline: 1px;
  --border: 1px solid var(--grey-200);

  /* ---------- 结构常量 ---------- */
  --header-h: 64px;
  --max-w-text: 720px;          /* 长文测量宽度：正文不超过此宽度 */
  --z-texture: 0;
  --z-content: 1;
  --z-nav: 90;
  --z-header: 100;
  --z-skip: 200;

  /* ---------- 焦点态（无障碍） ---------- */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand-blue);

  /* ---------- 极克制的投影：仅用于浮起的导航，不用重阴影 ---------- */
  --shadow-hair: 0 1px 0 rgba(16, 26, 61, 0.04);
}

/* ===========================================================================
   深色区块（仅用于强调）
   =========================================================================== */
.section--dark {
  --paper: var(--ink-blue);
  --grey-900: #ffffff;
  --grey-700: #c3cada;
  --grey-500: #93a0ba;
  --grey-400: #7c88a6;
  --grey-300: #39415f;
  --grey-200: #2b3352;
  --grey-100: #232a45;
  --grey-050: #1a2138;

  background: var(--ink-blue);
  color: #ffffff;
}