@layer base {
  html {
    height: 100%;
  }

  @media (width >= 640px) {
    html { font-size: 18px; }
  }
  @media (width >= 768px) {
    html { font-size: 20px; }
  }
  @media (width >= 1024px) {
    html { font-size: 22px; }
  }
  @media (width >= 1280px) {
    html { font-size: 24px; }
  }
  @media (width >= 1536px) {
    html { font-size: 26px; }
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-ink);
    background-color: var(--color-canvas);
  }

  a:not([class]) {
    color: var(--color-link);
  }

  a:not([class]):hover {
    color: var(--color-link-hover);
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  :disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  form.button_to {
    display: inline-block;
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
  }
}