:root,
:root[data-theme="light"] {
  color-scheme: light;
  --hw-canvas: #f4f1e8;
  --hw-surface: #fffdf7;
  --hw-surface-muted: #e9e4d9;
  --hw-ink: #152033;
  --hw-ink-soft: #2b3749;
  --hw-muted: #66707c;
  --hw-text-muted: #59636f;
  --hw-text-accent: #a63822;
  --hw-rule: #c9c7bf;
  --hw-rule-strong: #9fa4a8;
  --hw-blue: #245bcc;
  --hw-red: #c64b31;
  --hw-green: #0a6847;
  --hw-header-bg: rgba(244, 241, 232, 0.96);
  --hw-on-ink: #fffdf7;
  --hw-grid-line: rgba(21, 32, 51, 0.04);
  --hw-blue-tint: rgba(36, 91, 204, 0.07);
  --hw-red-tint: rgba(198, 75, 49, 0.07);
  --hw-focus: rgba(36, 91, 204, 0.38);
  --hw-inverse-bg: #101927;
  --hw-inverse-surface: #1b2940;
  --hw-inverse-ink: #f3efe5;
  --hw-inverse-muted: rgba(255, 255, 255, 0.62);
  --hw-inverse-faint: rgba(255, 255, 255, 0.44);
  --hw-inverse-rule: rgba(255, 255, 255, 0.16);
  --hw-inverse-rule-strong: rgba(255, 255, 255, 0.34);
  --hw-inverse-hover: rgba(255, 255, 255, 0.055);
  --hw-inverse-decor: rgba(255, 255, 255, 0.08);
  --hw-inverse-link: #9fbcff;
  --hw-inverse-text-muted: #aeb8c7;
  --hw-inverse-text-accent: #ff8e73;
  --hw-shadow: 0 18px 48px rgba(21, 32, 51, 0.08);
  --hw-page-gutter: clamp(32px, 3vw, 56px);
  --hw-paper: var(--hw-canvas);
  --hw-paper-strong: var(--hw-surface);
  --hw-rule-dark: var(--hw-rule-strong);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --hw-canvas: #0f1724;
  --hw-surface: #172235;
  --hw-surface-muted: #1d2a3f;
  --hw-ink: #f4f1e8;
  --hw-ink-soft: #d7dde7;
  --hw-muted: #aab4c2;
  --hw-text-muted: #aab4c2;
  --hw-text-accent: #ef765a;
  --hw-rule: #344258;
  --hw-rule-strong: #52627b;
  --hw-blue: #8aabff;
  --hw-red: #ef765a;
  --hw-green: #57c8a0;
  --hw-header-bg: rgba(15, 23, 36, 0.96);
  --hw-on-ink: #0f1724;
  --hw-grid-line: rgba(244, 241, 232, 0.045);
  --hw-blue-tint: rgba(138, 171, 255, 0.11);
  --hw-red-tint: rgba(239, 118, 90, 0.11);
  --hw-focus: rgba(138, 171, 255, 0.55);
  --hw-inverse-bg: #080d15;
  --hw-inverse-surface: #101927;
  --hw-inverse-ink: #f4f1e8;
  --hw-inverse-muted: #b6c0cf;
  --hw-inverse-faint: #8995a8;
  --hw-inverse-rule: #29364a;
  --hw-inverse-rule-strong: #46566e;
  --hw-inverse-hover: rgba(255, 255, 255, 0.07);
  --hw-inverse-decor: rgba(255, 255, 255, 0.08);
  --hw-inverse-link: #9fbcff;
  --hw-inverse-text-muted: #aeb8c7;
  --hw-inverse-text-accent: #ff8e73;
  --hw-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  --hw-page-gutter: clamp(32px, 3vw, 56px);
  --hw-paper: var(--hw-canvas);
  --hw-paper-strong: var(--hw-surface);
  --hw-rule-dark: var(--hw-rule-strong);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --hw-canvas: #0f1724;
    --hw-surface: #172235;
    --hw-surface-muted: #1d2a3f;
    --hw-ink: #f4f1e8;
    --hw-ink-soft: #d7dde7;
    --hw-muted: #aab4c2;
    --hw-text-muted: #aab4c2;
    --hw-text-accent: #ef765a;
    --hw-rule: #344258;
    --hw-rule-strong: #52627b;
    --hw-blue: #8aabff;
    --hw-red: #ef765a;
    --hw-green: #57c8a0;
    --hw-header-bg: rgba(15, 23, 36, 0.96);
    --hw-on-ink: #0f1724;
    --hw-grid-line: rgba(244, 241, 232, 0.045);
    --hw-blue-tint: rgba(138, 171, 255, 0.11);
    --hw-red-tint: rgba(239, 118, 90, 0.11);
    --hw-focus: rgba(138, 171, 255, 0.55);
    --hw-inverse-bg: #080d15;
    --hw-inverse-surface: #101927;
    --hw-inverse-ink: #f4f1e8;
    --hw-inverse-muted: #b6c0cf;
    --hw-inverse-faint: #8995a8;
    --hw-inverse-rule: #29364a;
    --hw-inverse-rule-strong: #46566e;
    --hw-inverse-hover: rgba(255, 255, 255, 0.07);
    --hw-inverse-decor: rgba(255, 255, 255, 0.08);
    --hw-inverse-link: #9fbcff;
    --hw-inverse-text-muted: #aeb8c7;
    --hw-inverse-text-accent: #ff8e73;
    --hw-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    --hw-paper: var(--hw-canvas);
    --hw-paper-strong: var(--hw-surface);
    --hw-rule-dark: var(--hw-rule-strong);
  }
}

@media (max-width: 680px) {
  :root,
  :root[data-theme="light"],
  :root[data-theme="dark"] {
    --hw-page-gutter: 14px;
  }
}