:root {
  color-scheme: light;
  --sf-ink: #171b17;
  --sf-ink-soft: #4c534b;
  --sf-ink-faint: #747a72;
  --sf-paper: #eee7da;
  --sf-paper-light: #f5f0e7;
  --sf-paper-deep: #ded4c3;
  --sf-forest: #172019;
  --sf-forest-soft: #243228;
  --sf-forest-ink: #f2efe8;
  --sf-forest-muted: #b8bcb3;
  --sf-mist: #dfe3dc;
  --sf-river: #cfd8d4;
  --sf-ember: #c94722;
  --sf-ember-dark: #9d3217;
  --sf-positive: #287455;
  --sf-warning: #a6552e;
  --sf-danger: #9a3d35;
  --sf-line: rgb(23 27 23 / 20%);
  --sf-line-light: rgb(242 239 232 / 26%);
  --sf-font-sans: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --sf-font-reading: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --sf-shell: 82rem;
  --sf-gutter: clamp(1.25rem, 4vw, 4rem);
  --sf-header-height: calc(5rem + env(safe-area-inset-top, 0px));
  --sf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sf-shadow-soft: 0 1.5rem 5rem rgb(13 17 14 / 12%);
  --sf-radius-small: 0.25rem;
  --sf-radius-medium: 0.75rem;
  --sf-focus: 3px solid var(--sf-ember);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sf-ink: #eeece3;
  --sf-ink-soft: #c6c6bd;
  --sf-ink-faint: #a4a79f;
  --sf-paper: #181d19;
  --sf-paper-light: #111512;
  --sf-paper-deep: #202621;
  --sf-line: rgb(238 236 227 / 15%);
  --sf-shadow-soft: 0 1.875rem 5.625rem rgb(0 0 0 / 28%);
}