:root {
  color-scheme: light dark;
  --za-canvas: light-dark(#fafafa, #1e1e1e);
  --za-surface: light-dark(#ffffff, #252525);
  --za-soft: light-dark(#f1f1f3, #303030);
  --za-hover: light-dark(#e8e8eb, #3a3a3a);
  --za-ink: light-dark(#202024, #ececec);
  --za-muted: light-dark(#696970, #aeaeae);
  --za-line: light-dark(#e6e6e9, #404040);
  --za-highlight: light-dark(#b83a49, #ff9a9f);
  --za-highlight-soft: light-dark(#fff0ec, #43252f);
  --za-accent: var(--za-highlight);
  --za-accent-hover: light-dark(#9f293c, #ffb2b4);
  --za-accent-soft: var(--za-highlight-soft);
  --za-on-accent: light-dark(#ffffff, #32151d);
  --za-positive: light-dark(#396e49, #99d5a8);
  --za-positive-soft: light-dark(#e8f4ec, #203329);
  --za-danger: light-dark(#aa353f, #ff9ba4);
  --za-shadow: light-dark(#15151d12, #00000038);
  --za-radius-small: 8px;
  --za-radius: 14px;
  --za-radius-large: 22px;
  --za-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --za-space-1: 4px;
  --za-space-2: 8px;
  --za-space-3: 12px;
  --za-space-4: 16px;
  --za-space-6: 24px;
  --za-space-8: 32px;
  --za-space-12: 48px;
  --web-content-max: 1000px;
  --web-content-gutter: 64px;
  --web-content-width: min(var(--web-content-max), calc(100% - var(--web-content-gutter) - var(--web-content-gutter)));
}
@media (max-width: 1000px) {
  :root {
    --web-content-max: 680px;
    --web-content-gutter: 32px;
  }
}
@media (max-width: 720px) {
  :root {
    --web-content-gutter: 20px;
  }
}
@media (max-width: 370px) {
  :root {
    --web-content-gutter: 16px;
  }
}
:root[data-color-scheme="light"] {
  color-scheme: light;
}
:root[data-color-scheme="dark"] {
  color-scheme: dark;
}