/* Shared interaction and accessibility foundations. All visual values resolve to tokens. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-4);
}

:where(a, button, iframe):focus-visible {
  outline: var(--focus-ring-size) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

:where(.btn-gold, .btn-outline, .lang-btn, .lang-menu button, .mv-close, .rd-close, .mag-actions button) {
  min-block-size: var(--control-min-size);
}

:where(.btn-gold, .btn-outline, .lang-btn, .lang-menu button, .treat-card, .mag-cover-btn, .mag-actions button, .jr-item, .card):active {
  transform: scale(var(--pressed-scale));
}

:where(.treat-card, .mag-cover-btn, .mag-actions button, .jr-item, .card):focus-visible {
  border-color: var(--color-focus);
  box-shadow: var(--shadow-m);
}

.section--light {
  --ivory-faint: var(--color-muted-on-light);
}

.async-status {
  color: var(--color-muted);
  font-size: var(--font-step--1);
  margin-block: var(--space-s);
}

.async-status[data-state="error"] {
  color: var(--color-status-error);
}

.sr-only {
  position: absolute;
  inline-size: var(--border-thin);
  block-size: var(--border-thin);
  padding: var(--size-0);
  margin: calc(var(--border-thin) * -1);
  overflow: hidden;
  clip: rect(var(--size-0), var(--size-0), var(--size-0), var(--size-0));
  white-space: nowrap;
  border: var(--size-0);
}

@media (hover: hover) {
  .card:hover { background: var(--color-paper-hover); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}