/* Base: reset, typography, focus, links. Element selectors only; no classes. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { -webkit-text-size-adjust: 100%; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { margin: 0; font-weight: var(--font-weight-medium); line-height: var(--line-height-display); }
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }
  h4 { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
  p { margin: 0; }
  small { font-size: var(--font-size-sm); }
  ul, ol { margin: 0; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  button:disabled { cursor: default; }
  a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  hr { border: 0; border-top: var(--border-width) solid var(--color-border); margin: 0; }
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  ::selection { background: var(--color-accent-tint); }
}