/* ─────────────────────────────────────────────────────────────────────────────
   base.css — reset and document-level defaults

   Element selectors only, no classes or IDs. Anything that styles a named
   component belongs in components.css instead.
───────────────────────────────────────────────────────────────────────────── */

/* Border-box everywhere, so padding and borders count inside a declared width.
   Without this the 320px options rail plus its padding would total more and
   push the grid out. Zeroing margin/padding removes browser defaults. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.5;

  /* Both pages are fixed, non-scrolling surfaces: a full-viewport column with
     the header at natural height and the main area consuming the rest.
     overflow:hidden stops the page itself scrolling — the rail and the drawer
     scroll internally.

     100dvh, not 100vh: on mobile Safari the browser chrome retracts as you
     scroll, and 100vh is the TALLEST the viewport ever gets — so a fixed 100vh
     layout has its bottom edge, and with it the try-on button, hidden under the
     toolbar on arrival. dvh tracks the viewport as it actually is. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  -webkit-font-smoothing: antialiased;
}

/* Headings inherit the display face; weights stay light, since the serif is
   already doing the work. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

/* Range inputs render with heavy OS-native chrome. Stripped to a bare track
   here; the thumb is styled in components.css. */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

/* A visible focus ring for keyboard users, suppressed for mouse clicks.
   :focus-visible is what draws that distinction — never remove the outline
   outright, which would leave keyboard navigation with no indication at all. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Respect users who ask for reduced motion. The loading spinner, the drawer
   slide and all transitions are decorative, so removing them costs nothing
   functionally. Note this cannot reach the 3D animation, which is driven from
   JS — the viewer's auto-rotate is checked separately. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}