@layer reset, tokens, base;

@import url("./reset.css") layer(reset);
@import url("./tokens.css");

@layer base {
  :root {
    font-family: var(--font-family-sans);
  }

  html {
    scrollbar-gutter: stable;
  }

  html,
  body {
    min-height: 100%;
  }

  body {
    background-color: var(--color-background-page);
    color: var(--color-text-primary);
    line-height: var(--line-height-body);
    font-size: var(--font-size-16);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

  :focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }
}
