/**
 * base.css — 编辑印刷物美学 · 基础层
 * 阿拉个人品牌网站 · Interactive Tool Journal
 * 设计 token、字体、reset、全局排版与通用工具类
 *
 * @author weihanqiang
 * @date 2026-07-09 17:55
 */

/* =============================================================
 * Google Fonts
 * 西文展示 Fraunces / 等宽 JetBrains Mono / 中文衬线 Noto Serif SC / 中文无衬线 Noto Sans SC
 * 离线时自动降级至系统宋体，不崩版。
 * ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,600&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;500;600;700;900&display=swap');

/* =============================================================
 * 设计 Token · Design Tokens
 * ============================================================= */
:root {
  /* —— 色彩 —— */
  --ink:           #1a1612;  /* 主色·墨：印刷油墨暖黑 */
  --paper:         #f4efe4;  /* 底色·纸：象牙米白 */
  --paper-deep:    #efe9dd;  /* 纸·深：卡片/代码块底 */
  --cinnabar:      #c0392b;  /* 强调色·朱砂：印章/CTA */
  --cinnabar-deep: #a02a1e;  /* 朱砂·深：hover/边框 */
  --moss:          #2f4a3a;  /* 次强调·墨绿：链接/进度 */
  --warm-gray-1:   #8a8276;  /* 暖灰1：次要文字 */
  --warm-gray-2:   #bdb5a6;  /* 暖灰2：超大编号/占位 */

  /* —— 衍生色（透明叠加，保持油墨层次）—— */
  --paper-line:    #e2dccf;  /* 纸面分隔线 */
  --paper-edge:    #d8d1c1;  /* 纸张边缘硬线 */
  --ink-soft:      rgba(26, 22, 18, 0.74);
  --ink-mute:      rgba(26, 22, 18, 0.55);
  --ink-faint:     rgba(26, 22, 18, 0.32);
  --ink-ghost:     rgba(26, 22, 18, 0.12);
  --cinnabar-soft: rgba(192, 57, 43, 0.12);
  --cinnabar-mute: rgba(192, 57, 43, 0.32);
  --moss-soft:     rgba(47, 74, 58, 0.10);

  /* —— 字体族 —— */
  --serif:    "Noto Serif SC", "Source Han Serif SC", SimSun, "Songti SC", serif;
  --serif-en: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:     "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono:     "JetBrains Mono", "IBM Plex Mono", Consolas, "Courier New", monospace;

  /* —— 圆角 —— */
  --radius:      8px;
  --radius-card: 12px;
  --radius-full: 999px;

  /* —— 间距节奏（基于 4px 基线）—— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* —— 排版尺度 —— */
  --measure:      68ch;   /* 正文行宽 */
  --measure-wide: 88ch;
  --measure-narrow: 52ch;
  --gutter: 1.5rem;
  --rule:   1px solid var(--paper-line);
  --rule-ink: 1px solid var(--ink-ghost);

  /* —— 字号阶梯（clamp 响应式）—— */
  --fs-xs:   0.72rem;
  --fs-sm:   0.84rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  --fs-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-3xl:  clamp(2.6rem, 1.6rem + 4.4vw, 4.4rem);
  --fs-mega: clamp(3.4rem, 1.8rem + 8vw, 7rem);

  /* —— 阴影：纸张物理感（克制、低饱和）—— */
  --shadow-lift:  0 1px 0 rgba(26, 22, 18, 0.04), 0 10px 28px -14px rgba(26, 22, 18, 0.26);
  --shadow-card:  0 1px 0 rgba(26, 22, 18, 0.05), 0 2px 8px -3px rgba(26, 22, 18, 0.12);
  --shadow-press: inset 0 1px 2px rgba(26, 22, 18, 0.12);
  --shadow-stamp: 0 0 0 1.5px var(--cinnabar), 0 1px 0 rgba(26, 22, 18, 0.05);

  /* —— 动效 —— */
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --dur:     220ms;
  --dur-slow: 380ms;

  /* —— 布局 —— */
  --masthead-h: 56px;
  --container: 1200px;
  --container-read: 860px;
}

/* =============================================================
 * 暗色模式覆盖 · :root[data-widget-theme="dark"]
 * 预留：暖墨夜版，保留朱砂与油墨温度，不走冷调科技黑
 * ============================================================= */
:root[data-widget-theme="dark"] {
  --ink:           #f0e9da;  /* 反相：墨色文字→纸色 */
  --paper:         #161310;  /* 暖墨夜底 */
  --paper-deep:    #1f1b16;  /* 卡片底略亮 */
  --cinnabar:      #e0574a;  /* 朱砂提亮保证对比 */
  --cinnabar-deep: #c0392b;
  --moss:          #6a9a7e;  /* 墨绿提亮 */
  --warm-gray-1:   #9a9082;
  --warm-gray-2:   #5a5247;

  --paper-line:    #2c271f;
  --paper-edge:    #3a3329;
  --ink-soft:      rgba(240, 233, 218, 0.78);
  --ink-mute:      rgba(240, 233, 218, 0.58);
  --ink-faint:     rgba(240, 233, 218, 0.34);
  --ink-ghost:     rgba(240, 233, 218, 0.14);
  --cinnabar-soft: rgba(224, 87, 74, 0.16);
  --cinnabar-mute: rgba(224, 87, 74, 0.36);
  --moss-soft:     rgba(106, 154, 126, 0.14);

  --shadow-lift:  0 1px 0 rgba(0, 0, 0, 0.30), 0 12px 30px -14px rgba(0, 0, 0, 0.55);
  --shadow-card:  0 1px 0 rgba(0, 0, 0, 0.30), 0 2px 10px -3px rgba(0, 0, 0, 0.40);
  --shadow-press: inset 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-stamp: 0 0 0 1.5px var(--cinnabar), 0 0 0 4px rgba(224, 87, 74, 0.08);
}

/* =============================================================
 * 现代化 Reset
 * ============================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h) + 16px);
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg { fill: currentColor; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { cursor: pointer; background: none; border: none; }

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

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
 * 全局基底 · body
 * 纸色底、墨色文字、无衬线正文
 * 叠加极淡的纸纹噪点，强化"纸"的物质感
 * ============================================================= */
body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
  /* 纸张纤维感：双向极淡渐变 + 微噪点，不影响性能与可读性 */
  background-image:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(192, 57, 43, 0.025) 0%, transparent 55%);
  background-attachment: fixed;
}

:root[data-widget-theme="dark"] body {
  background-image:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(224, 87, 74, 0.05) 0%, transparent 55%);
}

/* 选中文字 = 朱砂批注色 */
::selection {
  background: var(--cinnabar);
  color: var(--paper);
}

/* =============================================================
 * 排版 · Typography
 * ============================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); font-weight: 600; }
h6 { font-size: var(--fs-base); font-weight: 600; }

p { text-wrap: pretty; }

/* 正文段落：最大行宽 + 首段不缩进，后续段落微缩进（书页感） */
.prose p { max-width: var(--measure); }
.prose p + p { text-indent: 2em; }

strong, b { font-weight: 700; color: var(--ink); }
em, i { font-style: italic; }

/* 西文展示标题（混排时更优雅） */
.display-en {
  font-family: var(--serif-en);
  font-feature-settings: "ss01", "liga";
}

/* 中文小标号 / 标签：等宽 + 大字距，强化"档案"感 */
.label,
.mono-label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-gray-1);
}

/* 编号前缀 No. */
.no-prefix {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 600;
  color: var(--warm-gray-1);
}

/* =============================================================
 * 链接 · 墨绿下划线
 * ============================================================= */
a {
  color: var(--moss);
  text-decoration: underline;
  text-decoration-color: var(--moss-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease),
              text-decoration-color var(--dur) var(--ease);
}

a:hover {
  color: var(--cinnabar-deep);
  text-decoration-color: var(--cinnabar);
}

a:active { color: var(--cinnabar-deep); }

/* 纯导航链接默认不带下划线，hover 才出墨绿线 */
.nav-link,
.masthead a {
  text-decoration: none;
  color: var(--ink-soft);
}
.nav-link:hover,
.masthead a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--cinnabar);
  text-underline-offset: 4px;
}

/* =============================================================
 * 引用与分隔 · 编辑物特有
 * ============================================================= */
blockquote {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-soft);
  border-left: 3px solid var(--cinnabar);
  padding: var(--space-2) var(--space-5);
  margin: var(--space-6) 0;
  max-width: var(--measure-wide);
}

blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--warm-gray-1);
  text-transform: uppercase;
}

/* 分隔线：默认细线 */
hr {
  border: 0;
  border-top: var(--rule);
  margin: var(--space-6) 0;
}

/* 双线分节：编辑物章节断句 */
.rule-double {
  border: 0;
  border-top: 3px double var(--paper-edge);
  margin: var(--space-7) 0;
}

/* 朱砂粗短规则（段首装饰） */
.rule-cinnabar {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--cinnabar);
  border: 0;
  margin: var(--space-4) 0;
}

/* =============================================================
 * 代码与等宽
 * ============================================================= */
code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.9em;
}

:not(pre) > code {
  background: var(--paper-deep);
  border: 1px solid var(--paper-line);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--cinnabar-deep);
}

pre {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  background: var(--paper-deep);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
}

/* =============================================================
 * 报刊栏式排版 · column layout
 * ============================================================= */
.columns-2 { column-count: 2; column-gap: 2.5rem; column-rule: var(--rule); }
.columns-3 { column-count: 3; column-gap: 2rem; column-rule: var(--rule); }

.columns-2 > p,
.columns-3 > p { break-inside: avoid-column; }

@media (max-width: 720px) {
  .columns-2, .columns-3 { column-count: 1; column-rule: 0; }
}

/* 首字下沉：编辑物/书页感 */
.dropcap::first-letter {
  font-family: var(--serif-en);
  font-weight: 900;
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.05em 0.12em 0 0;
  color: var(--cinnabar);
}

/* =============================================================
 * 通用工具类 · Utilities
 * ============================================================= */

/* 容器 */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-read {
  width: 100%;
  max-width: var(--container-read);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-wide {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 字体族快捷类 */
.serif    { font-family: var(--serif); }
.serif-en { font-family: var(--serif-en); }
.sans     { font-family: var(--sans); }
.mono     { font-family: var(--mono); }

/* 文字色 */
.t-ink      { color: var(--ink); }
.t-soft     { color: var(--ink-soft); }
.t-mute     { color: var(--ink-mute); }
.t-faint    { color: var(--warm-gray-1); }
.t-cinnabar { color: var(--cinnabar); }
.t-moss     { color: var(--moss); }

/* 字号 */
.fs-xs   { font-size: var(--fs-xs); }
.fs-sm   { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.fs-md   { font-size: var(--fs-md); }
.fs-lg   { font-size: var(--fs-lg); }
.fs-xl   { font-size: var(--fs-xl); }
.fs-2xl  { font-size: var(--fs-2xl); }

/* 字重与样式 */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }
.italic { font-style: italic; }
.upper  { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.14em; }
.tracking-tight{ letter-spacing: -0.02em; }

/* 文本对齐 */
.ta-left   { text-align: left; }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }

/* 朱砂批注高亮 · 模拟红笔下划线批注（核心记忆点）
 * 用 linear-gradient 在文字下方画一条朱砂半透明粗线 */
.annot {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 62%,
    var(--cinnabar-soft) 62%,
    var(--cinnabar-soft) 96%,
    transparent 96%
  );
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 朱砂批注·下划线款（更细，适合行内金句） */
.annot-under {
  text-decoration: underline wavy var(--cinnabar);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* 红笔圈出强调（单字/词） */
.annot-circle {
  position: relative;
  display: inline-block;
}
.annot-circle::after {
  content: "";
  position: absolute;
  inset: -0.18em -0.32em;
  border: 1.5px solid var(--cinnabar);
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
  transform: rotate(-2deg);
  pointer-events: none;
}

/* 显示控制 */
.hide       { display: none !important; }
.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;
}
.show-sm { display: none; }
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
  .show-sm { display: revert; }
}

/* 间距工具（纵向节奏） */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }

/* Flex / Grid 快捷 */
.flex      { display: flex; }
.inline-flex{ display: inline-flex; }
.flex-col  { flex-direction: column; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.grid      { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* 纵向堆叠间距（flow） */
.stack > * + * { margin-top: var(--flow-space, var(--space-5)); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* 纸面卡片底（轻量，组件层再细化） */
.surface {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-card);
}
.surface-deep {
  background: var(--paper-deep);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
}

/* 圆角 */
.r      { border-radius: var(--radius); }
.r-card { border-radius: var(--radius-card); }
.r-full { border-radius: var(--radius-full); }

/* =============================================================
 * 动效辅助
 * ============================================================= */
.transition { transition: all var(--dur) var(--ease); }
.lift-on-hover {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease);
}
.lift-on-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

/* =============================================================
 * 打印：保留印刷物本意
 * ============================================================= */
@media print {
  body { background: #fff; color: #000; }
  .masthead, .footer, .no-print { display: none !important; }
  a { color: #000; text-decoration: underline; }
}