/* ============================================================
   Design tokens — 提炼自 reference-design-system(captions.ai 风格)
   暖中性底 × 六色重音;Fraunces 展示字 / Inter 正文;4px 基准间距。
   ============================================================ */
:root {
  /* 品牌色 */
  --color-brand-ink: #1d1f20;
  --color-brand-coral: #ff6f49;
  --color-brand-coral-600: #f25a30;
  --color-brand-coral-50: #ffe8df;

  /* 重音色(六色系统) */
  --color-accent-mint: #5bf2bb;
  --color-accent-sky: #9af1ff;
  --color-accent-sky-600: #00c8e6;
  --color-accent-sun: #ffe800;
  --color-accent-lavender: #eddefd;
  --color-accent-peach: #ffcfcf;
  --color-accent-warm: #f99f3f;
  --color-accent-red: #d00000;

  /* 底色 */
  --color-bg-page: #ffffff;
  --color-bg-soft: #f5f9fa;
  --color-bg-muted: #eef3f5;
  --color-bg-card: #ffffff;
  --color-bg-inverse: #0e0f10;
  --color-bg-tint-coral: #fff1ea;
  --color-bg-tint-sky: #effbff;
  --color-bg-tint-mint: #e6fff3;
  --color-bg-tint-sun: #fffbd6;
  --color-bg-tint-lavender: #f7f0ff;

  /* 文字 */
  --color-text-primary: #0a0b0c;
  --color-text-strong: #1d1f20;
  --color-text-secondary: #595e5e;
  --color-text-muted: #7e8486;
  --color-text-inverse: #ffffff;
  --color-text-on-accent: #0a0b0c;
  --color-text-link: #1d1f20;

  /* 边框 */
  --color-border-subtle: #e8eff2;
  --color-border-default: #d0d6d7;
  --color-border-strong: #1d1f20;

  /* 状态 */
  --color-status-success: #00c67a;
  --color-status-warning: #f99f3f;
  --color-status-danger: #d00000;
  --color-status-info: #00c8e6;

  /* 字体 */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* 字号(展示级随视口流动) */
  --fs-display-2xl: clamp(3.25rem, 6vw + 0.5rem, 6rem);
  --fs-display-xl: clamp(2.5rem, 3.5vw + 1rem, 4.25rem);
  --fs-display-lg: clamp(2rem, 2.4vw + 0.75rem, 3.25rem);
  --fs-display-md: clamp(1.5rem, 1.4vw + 0.9rem, 2.25rem);
  --fs-display-sm: 1.5rem;
  --fs-body-lg: 1.125rem;
  --fs-body-md: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-mono: 0.875rem;

  /* 行高 / 字距 */
  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-base: 1.55;
  --lh-loose: 1.7;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.12em;

  /* 间距(4px 基准) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* 圆角 */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* 阴影(分层、柔和) */
  --shadow-xs: 0 1px 2px rgba(15, 16, 18, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 16, 18, 0.06), 0 1px 2px rgba(15, 16, 18, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 16, 18, 0.08), 0 2px 6px rgba(15, 16, 18, 0.05);
  --shadow-lg: 0 20px 48px rgba(15, 16, 18, 0.12), 0 4px 12px rgba(15, 16, 18, 0.06);
  --shadow-glow-coral: 0 0 0 6px var(--color-brand-coral-50);
}