/* ==========================================================================
   团子的成长日记 🍡 · base.css
   视觉工程组 · 设计系统基座
   —— reset / §1 全量设计令牌（浅色 + 夜灯）/ 字体栈 / 排版基线 /
      通用工具类 / 焦点可见性 / reduced-motion / 夜空星点 / 打印调色复位
   纪律：全站颜色只允许出现在本文件的令牌区；其余文件一律 var()/color-mix(var())。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip; /* 375px 防横向滚动的兜底 */
}

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

ul[class],
ol[class] {
  list-style: none;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

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

p a,
.letter-body a,
.noscript-tip a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   1. 设计令牌 · 浅色主题（默认「糖果云朵」）
   【契约 §1.1 逐字采用：变量名与色值不得改动】
   -------------------------------------------------------------------------- */
:root {
  /* 品牌色 */
  --c-primary: #ff8fab;        /* 桃粉 */
  --c-primary-strong: #e5648c; /* 深桃粉：标题/强调文字（保对比度） */
  --c-primary-soft: #ffc2d4;   /* 粉雾：底衬/选中态 */
  --c-sky: #aeddf2;  --c-sky-strong: #6fbedd;
  --c-sun: #ffe59e;  --c-sun-strong: #f7c948;
  --c-mint: #bdebd6; --c-lilac: #c9a7eb; --c-apricot: #ffcba8;

  /* 墨色（暖可可） */
  --ink-1: #463a4e;  /* 标题正文 */
  --ink-2: #75677f;  /* 次要 */
  --ink-3: #a79bb0;  /* 辅助说明 */

  /* 表面（分区节奏：米白基调交替暖桃/雾紫，禁止整屏高饱和渐变） */
  --bg: #fff9f5;
  --surface: #ffffff;
  --surface-2: #fff1ec;   /* 暖桃 tint */
  --surface-3: #f5f0fa;   /* 雾紫 tint */
  --line: #f3e3e6;

  /* 圆角梯度 */
  --r-xs: 10px; --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* 阴影层级（暖调低不透明）+ 光环 */
  --shadow-sm: 0 1px 3px rgba(70,58,78,.06);
  --shadow-md: 0 4px 12px rgba(229,100,140,.10);
  --shadow-lg: 0 10px 28px rgba(229,100,140,.16);
  --shadow-xl: 0 18px 44px rgba(70,58,78,.18);   /* 弹层/灯箱 */
  --ring: 0 0 0 6px rgba(255,194,212,.30);       /* 头像/焦点光环 */

  /* 动效 */
  --t-fast: .18s; --t-base: .28s; --t-med: .42s;
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 徽章 pop 类弹性 */

  /* 字号阶梯（正文 16/1.75；数字 tabular-nums） */
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 19px;
  --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: clamp(26px, 5vw, 34px);
  --fs-hero: clamp(32px, 8vw, 44px);

  /* 布局 */
  --nav-h: 64px;
  --container: 1080px;

  /* --------------------------------------------------------------------------
     1.x 视觉组补充令牌（非契约新增，供其余文件零硬编码引用）
     -------------------------------------------------------------------------- */
  /* 字体栈（契约 §1.2b，零外部字体文件） */
  --font-body: system-ui, -apple-system, "PingFang SC", "HarmonyOS Sans SC",
               "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  /* 标题/Hero/日期标签：前置圆体优先，平滑回退 */
  --font-round: "Yuanti SC", "YouYuan", "幼圆",
                system-ui, -apple-system, "PingFang SC", "HarmonyOS Sans SC",
                "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;

  /* 深色遮罩上的可读前景（灯箱字幕/计数等，两套主题各配一色） */
  --on-scrim: #ffeaf1;

  /* 环境动画时长（§7 要求的 3s 级漂浮 / 60s 级漂移 / 星点错峰，收敛为令牌） */
  --t-float: 3.6s;
  --t-float-alt: 4.3s;
  --t-wander: 21s;
  --t-wander-slow: 27s;
  --t-wander-slower: 33s;
  --t-drift: 66s;
  --t-drift-slow: 88s;
  --t-twinkle: 3.4s;
  --t-grow: .9s;              /* 图表柱体生长 */
  --stagger: 60ms;            /* 子元素入场错峰 */
  --stagger-bar: 80ms;        /* 图表柱体错峰 */

  /* 层级梯度 */
  --z-nav: 1000;
  --z-progress: 1200;
  --z-fab: 1100;
  --z-lightbox: 1300;
  --z-skip: 1400;

  /* 云朵波浪剪影（纯几何 data-URI，无任何颜色信息；
     着色一律由使用处的 background: var(--x) 提供） */
  --mask-clouds: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20120V70q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200q30-42%2060%200V120Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. 夜灯主题（契约 §1.2 逐字采用；主题状态由 JS 写在 <html> 上，
      CSS 只认 [data-theme]，不写 prefers-color-scheme 媒体规则）
   -------------------------------------------------------------------------- */
[data-theme="night"] {
  --c-primary: #ff9fb8; --c-primary-strong: #ffb3cb; --c-primary-soft: #4a3050;
  --c-sky: #a5d5ec; --c-sky-strong: #8fc6e4; --c-sun: #ffe0a3; --c-sun-strong: #ffd27a;
  --c-mint: #a8e2c6; --c-lilac: #b79ae0; --c-apricot: #f2bd9d;
  --ink-1: #f5eff4; --ink-2: #c4bad2; --ink-3: #8e82a3;
  --bg: #241f30; --surface: #372f49; --surface-2: #2b2536; --surface-3: #302943;
  --line: rgba(255,255,255,.08);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.30);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.38);
  --shadow-xl: 0 18px 44px rgba(0,0,0,.5);
  --ring: 0 0 0 6px rgba(255,159,184,.18);

  /* 补充令牌的夜灯取值 */
  --on-scrim: #f5eff4;
}

/* 主题状态同步给浏览器原生控件/滚动条 */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="night"] { color-scheme: dark; }

/* --------------------------------------------------------------------------
   3. 排版基线（正文 16px/1.75；数字 tabular-nums 全局继承）
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  background-color: var(--bg);
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  /* 夜灯切换的 300ms 柔和过渡（§6.4），时长只用令牌 */
  transition: background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-round); /* 标题前置圆体回退栈 */
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink-1);
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   4. 焦点可见性与选区（§8：focus-visible 2px 主色外描边）
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-primary-strong);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: color-mix(in srgb, var(--c-primary-soft) 80%, transparent);
  color: var(--ink-1);
}

/* --------------------------------------------------------------------------
   5. 通用工具类
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}

/* 分区：米白基调节奏由页面组挂修饰类决定，这里保持中性透明 */
.section {
  position: relative;
  padding-block: clamp(56px, 9vw, 88px);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* 锚点跳转余量对一切带 id 的 section 生效 */
section[id] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(30px, 6vw, 48px);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-primary-soft) 42%, transparent);
  color: var(--c-primary-strong);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .12em;
}

.section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary-strong);
}

.section-title {
  margin-top: 12px;
  font-size: var(--fs-3xl);
  font-family: var(--font-round);
  color: var(--ink-1);
}

.section-subtitle {
  margin-top: 8px;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

/* 按钮 -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                 /* 触达目标下限 */
  padding: 10px 24px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font-family: var(--font-round);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}

.btn-primary {
  background: var(--c-primary);
  /* 用主题背景色作前景字色：浅色主题≈白字、夜灯主题≈深字，双主题都保对比 */
  color: var(--bg);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--surface);
  color: var(--c-primary-strong);
  border-color: var(--c-primary);
}

/* 芯片 / 标签 --------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-primary-soft) 55%, transparent);
  color: var(--c-primary-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.7;
}

/* 卡片 --------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

/* 无障碍工具 --------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -72px;
  left: 16px;
  z-index: var(--z-skip);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--bg);
  font-weight: 800;
  box-shadow: var(--shadow-lg);
  transition: top var(--t-fast) var(--ease-out);
}

.skip-link:focus-visible {
  top: 12px;
}

.noscript-tip {
  display: block;
  max-width: 560px;
  margin: 16px auto;
  padding: 16px 20px;
  border: 1.5px dashed color-mix(in srgb, var(--c-sun-strong) 65%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-sun) 26%, var(--surface));
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. 共享关键帧（入场统一 fadeUp 14px / 徽章 spring pop / 环境缓浮 / 星闪）
   -------------------------------------------------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop-spring {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }  /* ≤8px 环境漂浮纪律 */
}

/* 统一入场工具：配合 animation-fill-mode:backwards 使用，JS 不在场也安全 */
.fade-up {
  animation: fade-up var(--t-base) var(--ease-out) backwards;
}

.stagger > :nth-child(1)  { animation-delay: calc(var(--stagger) * 0); }
.stagger > :nth-child(2)  { animation-delay: var(--stagger); }
.stagger > :nth-child(3)  { animation-delay: calc(var(--stagger) * 2); }
.stagger > :nth-child(4)  { animation-delay: calc(var(--stagger) * 3); }
.stagger > :nth-child(5)  { animation-delay: calc(var(--stagger) * 4); }
.stagger > :nth-child(6)  { animation-delay: calc(var(--stagger) * 5); }
.stagger > :nth-child(7)  { animation-delay: calc(var(--stagger) * 6); }
.stagger > :nth-child(8)  { animation-delay: calc(var(--stagger) * 7); }
.stagger > :nth-child(9)  { animation-delay: calc(var(--stagger) * 8); }
.stagger > :nth-child(10) { animation-delay: calc(var(--stagger) * 9); }
.stagger > :nth-child(n+11) { animation-delay: calc(var(--stagger) * 10); }

/* --------------------------------------------------------------------------
   7. 夜灯星点氛围（仅 night 显示；位置预设兜底，JS/span 可内联覆盖坐标）
   -------------------------------------------------------------------------- */
.stars {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  overflow: clip;
}

html[data-theme="night"] .stars {
  display: block;
}

.twinkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-sun) 85%, var(--surface));
  box-shadow: 0 0 6px color-mix(in srgb, var(--c-sun) 60%, transparent);
  opacity: .18;
  animation: twinkle var(--t-twinkle) ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: .14; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* 未携带内联坐标时的预设散布（12 枚；延迟一律由 --t-twinkle 推导） */
.twinkle:nth-of-type(1)  { top: 10%; left:  6%; }
.twinkle:nth-of-type(2)  { top: 22%; left: 17%; animation-delay: calc(var(--t-twinkle) * .26); }
.twinkle:nth-of-type(3)  { top: 12%; left: 29%; width: 2px; height: 2px; }
.twinkle:nth-of-type(4)  { top: 46%; left: 38%; animation-delay: calc(var(--t-twinkle) * .50); }
.twinkle:nth-of-type(5)  { top: 70%; left: 47%; width: 2px; height: 2px; animation-delay: calc(var(--t-twinkle) * .15); }
.twinkle:nth-of-type(6)  { top: 18%; left: 56%; animation-delay: calc(var(--t-twinkle) * .62); }
.twinkle:nth-of-type(7)  { top: 58%; left: 64%; }
.twinkle:nth-of-type(8)  { top: 30%; left: 73%; width: 4px; height: 4px; animation-delay: calc(var(--t-twinkle) * .35); }
.twinkle:nth-of-type(9)  { top: 66%; left: 81%; animation-delay: calc(var(--t-twinkle) * .76); }
.twinkle:nth-of-type(10) { top: 24%; left: 89%; }
.twinkle:nth-of-type(11) { top: 52%; left: 94%; width: 2px; height: 2px; animation-delay: calc(var(--t-twinkle) * .09); }
.twinkle:nth-of-type(12) { top: 84%; left: 12%; animation-delay: calc(var(--t-twinkle) * .44); }

/* --------------------------------------------------------------------------
   8. prefers-reduced-motion：全局关闭位移/缩放/漂浮/闪烁
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   9. 打印调色板复位（与 print.css 配合）
   十六进制色值集中在本文件是铁律要求；打印时无论当前处于哪个主题，
   一律恢复为浅色高对比取值，print.css 只负责结构性隐藏与分页。
   -------------------------------------------------------------------------- */
@media print {
  :root,
  [data-theme="light"],
  [data-theme="night"] {
    --c-primary: #f2a0b8; --c-primary-strong: #c24a74; --c-primary-soft: #ffd9e3;
    --c-sky: #c3e4f3; --c-sky-strong: #4d94b8;
    --c-sun: #ffe3a1; --c-sun-strong: #c9922a;
    --c-mint: #c6ebd8; --c-lilac: #d6c1f1; --c-apricot: #ffd2ae;
    --ink-1: #241d28; --ink-2: #4c4354; --ink-3: #6f6577;
    --bg: #ffffff; --surface: #ffffff;
    --surface-2: #fff7f3; --surface-3: #faf7fd;
    --line: #e6dbe1;
    --shadow-sm: 0 0 0 rgba(0,0,0,0);
    --shadow-md: 0 0 0 rgba(0,0,0,0);
    --shadow-lg: 0 0 0 rgba(0,0,0,0);
    --shadow-xl: 0 0 0 rgba(0,0,0,0);
    --ring: 0 0 0 3px rgba(194,74,116,.35);
  }
}