@layer tokens, reset, base, layout, vendor, components, states, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; }
  html { scrollbar-gutter: stable; }
  html.wd-nogutter { scrollbar-gutter: auto; }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  button {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
  }

  button, a, [role="button"], input, select, textarea, label, summary { touch-action: manipulation; }

  a { color: inherit; text-decoration: none; }

  img, svg { display: block; max-width: 100%; }

  ul, ol { padding: 0; }
}

@layer base {

  body {
    zoom: var(--fs);
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    background: var(--bg);
    color: var(--text);
    padding-block-end: 72px;
  }

  ::selection { background: var(--wd-accent); color: #fff; }
  :focus-visible {
    outline: 2px solid var(--wd-accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }
}