/* obvious base — shared element behaviours. Opt-in; import after primitives and a theme.
 * Generated by obvious v0.1.0. Do not edit by hand:
 * change src/ and re-run `npm run build`.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

/* Headings balance across their lines instead of stranding a last word;
   body copy uses the paragraph-tuned variant that only guards the final
   line. Both are native and degrade to normal wrapping where unsupported. */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* One focus treatment, everywhere. The ring takes its colour from the
   theme's accent, so it is recognisably the same ring on parchment as it
   is on near-black. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ds-focus-width) var(--ds-focus-style) var(--ds-color-accent);
  outline-offset: var(--ds-focus-offset);
}

::selection {
  background: var(--ds-color-selection-bg);
  color: var(--ds-color-selection-text);
}

/* Duration alone is not enough. Staggered entrances lean on delay, and
   zeroing only the duration leaves someone who asked for less motion
   staring at an empty screen until the delay elapses. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}