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

  html {
    font-size: 100%;
    font-family: var(--font-family-primary);
    color: var(--color-text);
    background-color: var(--color-surface);
  }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: inherit;
    line-height: var(--line-height-base);
    background-color: inherit;
    color: inherit;
  }

  img,
  svg,
  video {
    max-inline-size: 100%;
    display: block;
  }

  a {
    color: inherit;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.18em;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

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

  ::selection {
    background: color-mix(in srgb, var(--color-brand) 32%, transparent);
    color: var(--color-text-inverse);
  }
}