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

  :where(html) {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  :where(body) {
    font-family: var(--sblg-font-family);
    font-size: var(--sblg-fluid-base);
    line-height: var(--sblg-line-height-relaxed);
    color: var(--sblg-color-text);
    background-color: var(--sblg-color-bg);
    min-height: 100vh;
    overflow-x: hidden;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--sblg-font-weight-bold);
    line-height: var(--sblg-line-height-tight);
    text-wrap: balance;
  }

  :where(h1) {
    font-size: var(--sblg-fluid-5xl);
  }

  :where(h2) {
    font-size: var(--sblg-fluid-4xl);
  }

  :where(h3) {
    font-size: var(--sblg-fluid-3xl);
  }

  :where(h4) {
    font-size: var(--sblg-fluid-2xl);
  }

  :where(h5) {
    font-size: var(--sblg-fluid-xl);
  }

  :where(h6) {
    font-size: var(--sblg-fluid-lg);
  }

  :where(p, li) {
    text-wrap: pretty;
    max-width: 70ch;
  }

  :where(a) {
    color: var(--sblg-color-primary);
    text-decoration: none;
    transition: color var(--sblg-transition-fast);
  }

  :where(a:hover) {
    color: var(--sblg-color-primary-dark);
  }

  :where(img, picture, video, canvas, svg) {
    display: block;
    max-width: 100%;
    height: auto;
  }

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

  :where(button) {
    cursor: pointer;
    background: none;
    border: none;
  }

  :where(ul, ol) {
    list-style: none;
  }

  :where(:focus-visible) {
    outline: 2px solid var(--sblg-color-primary);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Skip Link */
  .sblg-skip-link {
    position: absolute;
    top: var(--sblg-space-2);
    left: var(--sblg-space-2);
    padding: var(--sblg-space-2) var(--sblg-space-4);
    background: var(--sblg-color-primary);
    color: var(--sblg-color-white);
    border-radius: var(--sblg-radius-md);
    font-weight: var(--sblg-font-weight-semibold);
    z-index: var(--sblg-z-tooltip);
    transform: translateY(-200%);
    transition: transform var(--sblg-transition-fast);
  }

  .sblg-skip-link:focus {
    transform: translateY(0);
  }

  /* Honeypot */
  .sblg-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
}