/* ============================================================
   MODIFI — Base
   Minimal reset + element defaults wired to tokens.
   Load AFTER tokens.css.
   ============================================================ */

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

* { margin: 0; }

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

body {
  font-family: var(--mod-font-display);
  font-size: var(--mod-text-body);
  line-height: var(--mod-leading-body);
  color: var(--mod-fg);
  background: var(--mod-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

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

h1, h2, h3, h4 { font-weight: var(--mod-weight-medium); line-height: var(--mod-leading-snug); }

::selection { background: var(--mod-yellow); color: var(--mod-ink); }

:focus-visible {
  outline: 2px solid var(--mod-blue);
  outline-offset: 3px;
  border-radius: var(--mod-r-sm);
}

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

/* ---- Type utility classes ---------------------------------- */

.mod-hero {
  font-family: var(--mod-font-display);
  font-size: var(--mod-text-hero);
  line-height: var(--mod-leading-tight);
  letter-spacing: var(--mod-track-tight);
  font-weight: var(--mod-weight-medium);
}

.mod-display {
  font-size: var(--mod-text-xl);
  line-height: var(--mod-leading-tight);
  letter-spacing: var(--mod-track-tight);
  font-weight: var(--mod-weight-medium);
}

.mod-title { font-size: var(--mod-text-l); line-height: var(--mod-leading-snug); }

.mod-lead  { font-size: var(--mod-text-m); line-height: 1.35; color: var(--mod-fg); }

/* Technical label — the running-header / annotation voice */
.mod-label {
  font-family: var(--mod-font-mono);
  font-size: var(--mod-text-label);
  letter-spacing: var(--mod-track-label);
  text-transform: uppercase;
  color: var(--mod-fg);
}

/* Playful product-UI text */
.mod-rounded { font-family: var(--mod-font-rounded); }

.mod-muted { color: var(--mod-muted); }

/* ---- Layout helpers ---------------------------------------- */

.mod-page { padding-inline: var(--mod-gutter); }

.mod-container {
  max-width: var(--mod-maxw);
  margin-inline: auto;
  padding-inline: var(--mod-gutter);
}

.mod-stack > * + * { margin-top: var(--mod-space-4); }
.mod-stack-lg > * + * { margin-top: var(--mod-space-7); }