/* 拾穗官网的 token：数值和 App 的设计系统一致（Shared/DesignSystem/Colors.swift、Typography.swift），App 的颜色改了这里一起改 */

/* 字体：Newsreader 的 Text（正文）和 Display（大标题），和页面一起发布，不从网上加载 */
@font-face { font-family: "Newsreader"; font-weight: 400; font-display: swap; src: url("fonts/newsreadertext-regular.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 600; font-display: swap; src: url("fonts/newsreadertext-semibold.woff2") format("woff2"); }
@font-face { font-family: "Newsreader Display"; font-weight: 600; font-display: swap; src: url("fonts/newsreaderdisplay-semibold.woff2") format("woff2"); }
/* 字体下载完之前用 Georgia 顶着，按 Newsreader 的字宽和行高调过，换字体时版面不跳 */
@font-face { font-family: "Newsreader Fallback"; font-weight: 400; src: local("Georgia"); size-adjust: 93.8%; ascent-override: 78.4%; descent-override: 28.3%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; font-weight: 600; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 84.3%; ascent-override: 87.2%; descent-override: 31.4%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Display Fallback"; font-weight: 600; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 85.1%; ascent-override: 86.4%; descent-override: 31.1%; line-gap-override: 0%; }

:root {
  color-scheme: light dark;

  /* 颜色：纸色底、墨色字，没有强调色；hair 是 0.5pt 细线，selection 是选中文字的底色 */
  --color-page: #F4EFE4;
  --color-ink: #151514;
  --color-ink2: #3D3D3A;
  --color-muted: #5E5D59;
  --color-hair: rgba(31, 30, 29, 0.10);
  --color-hair2: rgba(31, 30, 29, 0.14);
  --color-selection: rgba(31, 30, 29, 0.12);
  --grain: url("images/grain.webp");

  /* 字体：大标题 Newsreader Display，正文 Newsreader Text，小字用系统界面字体 */
  --font-display: "Newsreader Display", "Newsreader Display Fallback", Georgia, serif;
  --font-body: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* 字号：随窗口宽度在两个值之间变化 */
  --text-sm: 0.875rem; /* 14 小字：说明、页脚、顶栏链接 */
  --text-base: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18 → 20 正文 */
  --text-lede: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20 → 24 导语 */
  --text-h2: clamp(1.5625rem, 1.35rem + 0.9vw, 2rem); /* 25 → 32 小节标题 */
  --text-display: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); /* 40 → 64 页面标题 */

  /* 间距 */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem); /* 页面左右的留白 */

  /* 尺寸：阅读栏宽度、页面最宽、截图最宽，截图的圆角是屏幕的圆角比例，图标是 App 图标的圆角比例 */
  --measure: 37rem; /* 592 阅读栏：正文 20px 时一行 60–70 个字母 */
  --page-max: 68rem; /* 1088 页面最宽 */
  --shot-max: 18.75rem; /* 300 截图最宽 */
  --shot-radius: 15.4% / 7.1%;
  --radius-icon: 22.37%;
  --rule: 0.5px;
  --ring: 2px;
  --target: 44px; /* 链接的点按区域至少这么高 */
  --grain-size: 180px; /* 纸纹一格的大小（图是 360 像素的 2 倍图） */
  --wordmark-size: 1.25rem; /* 20 顶栏的字标 */
  --wordmark-mark-width: 1.0625rem; /* 17 字标前的麦穗 */
  --wordmark-mark-height: 1.5rem; /* 24 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-page: #1A1918; --color-ink: #F5F4F0; --color-ink2: #DEDCD4; --color-muted: #B0AEA5;
    --color-hair: rgba(250, 249, 245, 0.08); --color-hair2: rgba(250, 249, 245, 0.12);
    --color-selection: rgba(250, 249, 245, 0.16);
    --grain: url("images/grain-dark.webp");
  }
}