/* Layer order is declared once, here, because reset.css loads first.
   Every stylesheet wraps its rules in one of these layers, which means
   load order decides the cascade instead of selector specificity. */
@layer reset, tokens, layout, components, animations;

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100svh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

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

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

  button:disabled {
    cursor: not-allowed;
  }

  h1,
  h2,
  h3,
  h4 {
    font-size: inherit;
    font-weight: inherit;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  ul,
  ol {
    list-style: none;
    padding: 0;
  }

  a {
    color: inherit;
  }

  /* Visible focus everywhere, but only for keyboard traversal. */
  :focus-visible {
    outline: 3px solid var(--ink-blue);
    outline-offset: 3px;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  [hidden] {
    display: none !important;
  }

  /* Accessible-only text: announced by screen readers, invisible on screen. */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}