/* Minimal element defaults. Consumers get sane type + link colors for free. */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--type-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-medium); letter-spacing: var(--tracking-heading); }
h1 { font: var(--type-h1); letter-spacing: var(--tracking-display); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line); transition: box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-primary); box-shadow: inset 0 -1px 0 var(--green-500); }
a:active { color: var(--green-700); }
a:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: var(--border-hair) solid var(--line-hair); margin: var(--space-8) 0; }
::selection { background: var(--green-100); color: var(--ink-000); }
:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }