/* ============================================================
   Mixto Math — Base layer
   Minimal element defaults + a few brand helpers (the wordmark,
   the "x"-as-mix mark). Tokens do the heavy lifting; this just
   wires sensible defaults so specimen cards render on-brand.
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Numbers everywhere read as clean tabular Nunito figures. */
.mixto-num {
  font-family: var(--font-numeric);
  font-weight: var(--weight-extrabold);
  font-variant-numeric: tabular-nums;
}

/* ---- The wordmark ----
   "Mixt" + a recolored "x" doubling as a mix/multiply mark, + "o".
   Use .mixto-wordmark on a container and wrap the x in .mixto-x. */
.mixto-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--text-on-navy);
  display: inline-flex;
  align-items: baseline;
}
.mixto-wordmark .mixto-x {
  color: var(--orange-500);
  position: relative;
}

/* Eyebrow label — all caps, tracked, used above titles. */
.mixto-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--teal-500);
}

/* The three sacred mastery-state chips/dots. */
.mixto-state-dot {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--radius-pill);
}
.mixto-state-dot.is-unseen { background: var(--state-unseen); }
.mixto-state-dot.is-progress { background: var(--state-progress); }
.mixto-state-dot.is-mastered { background: var(--state-mastered); }

/* Reduced-motion: honor the PRD accessibility baseline. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}