/* Cartonwise portal base: page defaults, focus, figures and reduced motion.
   Load after fonts/fonts.css and tokens/tokens.css. Every selector sits in :where(), so any project rule overrides it. */

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

:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:where(body) {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, dl, dd) { margin: 0; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(img, svg) { display: block; max-width: 100%; }

/* Keyboard focus: a 2 px bg/surface gap, then a 2 px border/focus ring. Keyboard only, never on click.
   The transparent outline keeps a visible ring in forced-colours mode. */
:where(:focus-visible) { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* Figures, codes, counts and money: Plex Mono with tabular digits. Words never take mono. */
:where(.cw-num) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Links and text actions: blue/70, underlined on hover. */
:where(.cw-link) { color: var(--color-text-link); text-decoration: none; }
:where(.cw-link:hover) { text-decoration: underline; text-underline-offset: 2px; }

.cw-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Reduced motion: opacity only, no movement. */
@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    transition-property: opacity !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}