@layer base {
  html {
    font-size: 100%;
    scrollbar-gutter: stable;
  }

  body {
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    line-height: 1.5;
    min-height: 100dvh;
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:not([class]) {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  :is(a, button, input, textarea, select) {
    transition: var(--transition-fast);
    transition-property: background-color, border-color, box-shadow, color, filter, outline, transform;
    touch-action: manipulation;

    &:where(:focus-visible) {
      border-radius: 0.4rem;
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    &:where([disabled]) {
      cursor: not-allowed;
      opacity: 0.6;
      pointer-events: none;
    }
  }

  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  [role="button"] {
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
  }

  button:disabled,
  [type="button"]:disabled,
  [type="submit"]:disabled,
  [type="reset"]:disabled {
    cursor: not-allowed;
    filter: grayscale(0.15) brightness(0.96);
  }

  button:not(:disabled):hover,
  [type="button"]:not(:disabled):hover,
  [type="submit"]:not(:disabled):hover,
  [type="reset"]:not(:disabled):hover,
  [role="button"]:hover {
    filter: brightness(0.97);
  }

  button:not(:disabled):active,
  [type="button"]:not(:disabled):active,
  [type="submit"]:not(:disabled):active,
  [type="reset"]:not(:disabled):active,
  [role="button"]:active {
    filter: brightness(0.94);
    transform: translateY(1px);
  }

  ::selection {
    background: var(--color-accent-soft);
  }

  turbo-frame {
    display: contents;
  }

  .turbo-progress-bar {
    background: linear-gradient(90deg, var(--color-emerald-500), var(--color-emerald-400));
    height: 3px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }

  [hidden] {
    display: none !important;
  }
}