/* Global styles: what plain HTML looks like in the shop, from the tokens.
   A small reset first (after Josh Comeau's), then the page and its type.
   :where() keeps every rule weightless, so a block or utility class always
   wins over them. */

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

:where(*:not(dialog)) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

:where(img, picture, video, canvas, svg) {
  display: block;
  max-inline-size: 100%;
}

:where(img, svg, video) {
  block-size: auto;
}

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

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

/* A number is typed or stepped by the page's own buttons, never spun */
input[type="number"] {
  appearance: textfield;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
}

/* Hidden means hidden, even for a block that sets its own display */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/* ── The page ──────────────────────────────────────────────────────────── */
/* What the browser scrolls into view (a focused field, an anchor) stays clear
   of the sticky header, and of the checkout dock once it is up (WCAG 2.4.11) */
html {
  scroll-padding-block: calc(4rem + var(--space-s)) var(--space-s);
}

html:has(.checkout-bar--visible) {
  scroll-padding-block-end: 7rem;
}

:where(body) {
  background: var(--color-surface-0);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  min-block-size: 100dvh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings wear the organizer's heading face (fonts.css) */
:where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-size-adjust: var(--font-display-adjust);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--font-display-tracking);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

:where(h1) {
  font-size: var(--step-5);
}

:where(h2) {
  font-size: var(--step-3);
}

:where(h3) {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

:where(h4) {
  font-size: var(--step-0);
  line-height: var(--leading-snug);
}

:where(p, li, dd, figcaption) {
  max-inline-size: var(--measure);
}

:where(p) {
  text-wrap: pretty;
}

:where(small) {
  font-size: var(--step--1);
}

:where(a:not([class])) {
  color: currentColor;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);

  &:hover {
    text-decoration-color: currentColor;
  }
}

:where(ul, ol)[role="list"] {
  list-style: none;
  padding: 0;
}

:where(strong, b) {
  font-weight: var(--weight-semibold);
}

:where(code, kbd) {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:where(hr) {
  border: 0;
  border-block-start: var(--border-width) solid var(--color-subtle);
}

/* A fieldset only groups. Its legend floats so it joins the content as an
   ordinary child: a .flow or .field fieldset spaces it like the rest */
:where(fieldset) {
  border: 0;
  min-inline-size: 0;
  padding: 0;
}

:where(legend) {
  float: inline-start;
  inline-size: 100%;
  padding: 0;
}

/* One focus ring everywhere, drawn outside the element */
:where(:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in oklch, var(--color-accent) 30%, transparent);
}