:root {
  --ground: #EFF0F0;
  --ink: #000000;
  --accent: var(--content-expressive-red);
  --serif: var(--family-display);
  --sans: var(--family-primary);
  --sans-features: "ss03", "ss04", "ss08";
  --wordmark-features: "case", "ss01", "ss03", "ss04", "ss08";
  --mono: var(--family-mono);
  --edge: var(--padding-edge);
  --gutter: var(--spacing-medium);
  --chrome-max: 3000px;
  --chrome-inset: max(var(--edge), calc(50% - var(--chrome-max) / 2 + var(--edge)));
  --panel-radius: 12px;
  --panel-filter: none;
  --select-bg: var(--background-extension-negative-transparent-pressed);
  --select-ink: var(--content-extension-negative);
  --veil: var(--background-veil);

  --nav-h: 39px;
  --nav-gap: var(--spacing-xxxsmall);
  --nav-border: var(--stroke-xsmall);
  --nav-top: var(--spacing-xlarge);
  --nav-block: calc(var(--nav-h) + 2 * var(--nav-gap) + 2 * var(--nav-border));
  --nav-bottom: calc(var(--nav-top) + var(--nav-block));
  --nav-outer: var(--radius-max);
  --nav-inner: var(--radius-max);
  --nav-bg: var(--background-tint);
  --nav-edge: var(--border-transparent);
  --nav-ink: var(--content-secondary);
  --nav-ink-on: var(--content-primary);
  --nav-icon: var(--content-tertiary);
  --nav-thumb: var(--background-overlay2);
  --nav-thumb-border: var(--stroke-small);
  --nav-thumb-edge: var(--border-primary);
  --nav-thumb-inset: var(--effect-style-inner-shadow-thumb);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --ground: #070808;
  --ink: #F2F2F0;
  --panel-filter: brightness(0.82) saturate(0.92);
  --select-bg: var(--background-extension-negative-transparent);

  color-scheme: dark;
}

@media (max-width: 768px) {
  :root {
    --chrome-top: var(--spacing-xlarge);
  }
}

* { box-sizing: border-box; }

::selection {
  background: var(--select-bg);
  color: var(--select-ink);
}

body {
  margin: 0;
  background: var(--background-primary);
  color: var(--content-primary);
  font-family: var(--family-primary);
  font-feature-settings: var(--sans-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 240ms ease, color 240ms ease;
}

:root[data-input="pointer"] :focus-visible { outline: none; }