/* ==========================================================================
   Edumoción design system — base layer
   Mirrored from _ds/.../tokens/base.css, plus the reset bits a standalone
   page needs (box-sizing, media defaults) that the canvas runtime provided.
   ========================================================================== */

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

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font: var(--type-body);
  text-wrap: pretty;
}

h1, h2, h3, h4 { margin: 0; }

p, figure, blockquote { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--motion-hover);
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

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

button { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}