@layer tokens, base, layout, components, views;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--g-bg);
    color: var(--g-ink);
    font-family: var(--g-font);
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
  }
  h1, h2, h3, p { margin: 0; }
  h1 { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
  h2 { font-size: 15px; line-height: 1.3; font-weight: 650; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  svg { flex: none; }
  :focus-visible { outline: 2px solid var(--g-brand); outline-offset: 2px; }
  [hidden] { display: none !important; }
  .g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
}