/* ============================================================
   MUGEN° — Base reset & primitives
   Dark canvas, Inter body, smooth-scroll-friendly. Optional
   helper classes mirror the token system for quick prototyping.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
  font-weight: var(--fw-regular);
}

::selection { background: var(--mg-white); color: var(--mg-black); }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* — Display & headings — */
.mg-display-1, .mg-display-2, .mg-display-3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.mg-display-1 { font-size: var(--text-display-1); }
.mg-display-2 { font-size: var(--text-display-2); }
.mg-display-3 { font-size: var(--text-display-3); letter-spacing: var(--tracking-tight); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }

p { color: var(--text-secondary); }
.mg-lead { font-size: var(--text-lead); line-height: var(--lh-snug); color: var(--text-secondary); letter-spacing: var(--tracking-snug); }

/* — Eyebrow / section label (Geist, uppercase) — */
.mg-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--label);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* monospaced-feel index tag, e.g. [01] */
.mg-index {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* — Layout helpers — */
.mg-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.mg-section { padding-block: var(--section-pad-y); }
.mg-hairline { border-top: var(--border-hairline); }

/* — Focus — */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}