/* ============================================================
   Spicy Margarita — Base helpers & primitives
   Lightweight, opt-in classes. Tokens do the heavy lifting.
   ============================================================ */

/* ---- Reusable text primitives ---- */
.sm-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-body);
}

.sm-headline {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-body);
}

.sm-kicker {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--text-brand);
}

.sm-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* ---- Inline highlighter (lime marker behind text) ---- */
.sm-mark {
  background: var(--highlight);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.05em 0.18em;
}

/* ---- Wordmark ---- */
.sm-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  line-height: 1;
}
.sm-wordmark .spicy {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
}
.sm-wordmark .margarita {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

/* ---- Monogram ---- */
.sm-monogram {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
}

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