html {
  font-family: var(--ds-font-sans);
  font-size: 16px;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--ds-surface-default);
  color: var(--ds-text-primary);
  font-family: var(--ds-font-sans);
  line-height: 1.5;
}

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

button,
[role='button'],
a,
input,
select,
textarea,
[tabindex]:not([tabindex='-1']) {
  outline: none;
}

button:focus-visible,
[role='button']:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible {
  box-shadow: var(--ds-focus-ring) !important;
  outline: 2px solid transparent !important;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled='true'] {
  cursor: not-allowed !important;
  opacity: .52 !important;
}

::selection {
  background: color-mix(in srgb, var(--ds-brand) 35%, transparent);
  color: var(--ds-text-primary);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

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