/* ============================================================
   Baza — element defaults & typographic utilities
   Lekki reset + klasy tekstowe oparte na tokenach.
   Klasy prefiksowane `mcd-` (Między Ciałem a Duszą).
   ============================================================ */

:root {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---------- Headings default to serif ---------- */
.mcd-display,
.mcd-title,
.mcd-h3 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}

.mcd-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.mcd-display em { font-style: italic; font-weight: var(--fw-regular); }

.mcd-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.mcd-title em { font-style: italic; }

.mcd-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.mcd-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-lead);
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

.mcd-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  text-wrap: pretty;
}

.mcd-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--kobalt);
}

.mcd-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  color: var(--text-muted);
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}