:root {
  color-scheme: light dark;
  --color-paper: light-dark(#fff, #000);
  --color-ink: light-dark(#0d0d0d, #f5f5f7);
  --color-muted: light-dark(#646467, #aaaab0);
  --color-soft: light-dark(#f7f7f8, #17171a);
  --color-rule: light-dark(#e5e5e7, #303034);
  --color-accent: #f6a56e;
  --color-accent-ink: #37312e;
  --color-link: light-dark(#975020, #f6a56e);
  --color-focus: light-dark(#975020, #f6a56e);
  --color-contrast: light-dark(#171719, #1a1d22);
  --color-on-contrast: #fff;
  --color-muted-contrast: #b7b7bc;
  --color-rule-contrast: #414144;
  --color-image-ink: #fff;
  --color-image-bg: #000;
  --color-backdrop: rgb(0 0 0 / 84%);
  --font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: var(--font-display);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-section: clamp(72px, 9vw, 128px);
  --text-small: 13px;
  --text-body: 16px;
  --text-display: clamp(48px, 6.2vw, 84px);
  --text-heading: clamp(32px, 4vw, 48px);
  --radius-sm: 12px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --rule-width: 1px;
  --dur-fast: 160ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }