@layer reset, tokens, base, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, p { margin: 0; }
  button, input, select { font: inherit; }
}

@layer base {
  body {
    min-width: 320px;
    min-height: 100vh;
    color: var(--color-text);
    background: var(--color-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  button { cursor: pointer; }
  button:focus-visible, input:focus-visible, [contenteditable]:focus-visible, a:focus-visible {
    outline: 3px solid rgb(37 99 235 / 35%);
    outline-offset: 2px;
  }

  .skip-link {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    color: white;
    background: var(--color-primary);
    transform: translateY(-110%);
  }

  .skip-link:focus { transform: translateY(0); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}