:root {
  color-scheme: light;

  --red: #e8467c;
  --red-deep: #b5305c;
  --red-ink: #ae355d;
  --gold: #f2b72e;
  --gold-deep: #c9901d;
  --gold-ink: #7d5f1d;

  --paper: #fbf7f4;
  --paper-2: #f4eee9;
  --paper-3: #eeeae8;
  --surface: #ffffff;

  --ink: #14121a;
  --ink-2: #1c1922;
  --ink-3: #29272f;

  --text: #242229;
  --text-dim: #6b6472;
  --text-inv: #fdfbfa;
  --text-inv-dim: #9a9798;

  --line: rgba(36, 34, 41, 0.12);
  --line-strong: rgba(36, 34, 41, 0.22);
  --line-inv: rgba(253, 251, 250, 0.14);
  --line-gold: rgba(242, 183, 46, 0.38);

  --font-display: "Songti SC", "STSong", "Noto Serif SC", "SimSun", "Source Han Serif SC", serif;
  --font-brush: "KaiTi", "STKaiti", "Songti SC", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Consolas", "Roboto Mono", ui-monospace, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-19: 1.1875rem;
  --fs-28: 1.75rem;
  --fs-52: clamp(2.25rem, 1.55rem + 2.4vw, 3.25rem);
  --fs-86: clamp(2.75rem, 1.4rem + 5.4vw, 5.375rem);

  --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: clamp(56px, 7vw, 96px);
  --sp-10: clamp(80px, 9vw, 128px);

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(20, 18, 26, 0.06), 0 6px 18px rgba(20, 18, 26, 0.05);
  --shadow-2: 0 2px 6px rgba(20, 18, 26, 0.08), 0 18px 48px rgba(20, 18, 26, 0.09);

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  --ratio-cover: 2 / 3;
  --ratio-scene: 16 / 9;
  --ratio-wide: 21 / 9;
  --ratio-square: 1 / 1;
  --ratio-og: 1200 / 630;

  --t-fast: 150ms;
  --t-base: 260ms;
  --t-slow: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-head: 60;
  --z-overlay: 90;
}

[data-theme="dark"] {
  color-scheme: dark;

  --paper: #14121a;
  --paper-2: #1c1922;
  --paper-3: #29272f;
  --surface: #1f1c26;

  --text: #fdfbfa;
  --text-dim: #9a9798;
  --text-inv: #fdfbfa;
  --text-inv-dim: #9a9798;

  --line: rgba(253, 251, 250, 0.14);
  --line-strong: rgba(253, 251, 250, 0.26);
  --line-inv: rgba(253, 251, 250, 0.12);
  --line-gold: rgba(242, 183, 46, 0.34);

  --red: #eb6290;
  --red-deep: #e8467c;
  --red-ink: #eb6290;
  --gold-ink: #f2b72e;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.34), 0 18px 48px rgba(0, 0, 0, 0.36);
}