/* ==========================================================================
   Base — scoped reset and shared primitives.

   Deliberately does NOT reset the host page. Every rule is scoped to elements
   this library owns: class attributes that start with `ds-` or contain ` ds-`.
   (`[class*='ds-']` would wrongly match things like "cards-grid".)
   ========================================================================== */

[class^='ds-'],
[class*=' ds-'],
[class^='ds-']::before,
[class*=' ds-']::before,
[class^='ds-']::after,
[class*=' ds-']::after {
  box-sizing: border-box;
}

/* The optional root wrapper rendered by ThemeProvider. Establishes the type
   ramp and surface colors for everything inside it. */
.ds-root {
  color: var(--ds-color-text);
  background-color: var(--ds-color-bg);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-md);
  line-height: var(--ds-leading-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Components inherit the type ramp when used without a ThemeProvider too. */
[class^='ds-'],
[class*=' ds-'] {
  font-family: var(--ds-font-sans);
}

/* Screen-reader-only text. Used by Spinner, Checkbox, Modal close, etc. */
.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  [class^='ds-'],
  [class*=' ds-'] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}