/* Spark — class idiom built on the tokens.
   These utility/component classes are the canonical way to style Spark web
   surfaces. Use them or build straight from the var(--*) tokens. */

/* ── Register backgrounds ──────────────────────────────────── */
.register-cream { background: var(--cream);      color: var(--ink); }
.register-warm  { background: var(--cream-deep); color: var(--ink); }
.register-dark  { background: var(--cream-deep); color: var(--ink); }
.register-light { background: var(--light-canvas); color: var(--ink); }

/* ── Type idiom ────────────────────────────────────────────── */
.headline {
  font-family: var(--font);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-heading);
  margin: 0;
}
.eyebrow {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--spark-orange);
  margin: 0;
}
/* Quieter eyebrow variant — muted warm ink, wider tracking */
.eyebrow-dark {
  color: var(--ink-soft);
  letter-spacing: var(--track-caps);
}
.body-text {
  font-family: var(--font);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* ── Brand wordmark — gradient fill + slow sheen ───────────── */
.spark-wordmark {
  font-family: var(--font);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-tight);
  background: var(--spark-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Primary CTA — gradient fill, soft, with a press "spark" ─ */
.btn-primary {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--spark-gradient);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 24px;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform var(--dur-entrance) var(--ease-out),
              box-shadow var(--dur-entrance) var(--ease-out);
}
.btn-primary:hover  { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

/* Secondary — white card on light, hairline border */
.btn-secondary {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: var(--surface-white);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 14px 24px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-quick) var(--ease-out);
}
.btn-secondary:active { transform: scale(0.98); }

/* ── Surface card (light register) ─────────────────────────── */
.bento-card {
  background: var(--surface-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

/* ── Warm accent pill ──────────────────────────────────────── */
.accent-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-weight: var(--fw-semibold);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--pill-text);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
}

/* ── Entrance utility ──────────────────────────────────────────
   Transition-based reveal driven by a `.is-in` class added on mount.
   The BASE state is fully visible, so content can never get stuck hidden
   (a missing/late frame just means no animation, never a blank screen).
   JS adds `.enter--armed` on mount to opt into the hidden start, then
   `.is-in` on the next frame to play the rise. */
.enter { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .enter {
    transition: opacity var(--dur-entrance) var(--ease-out),
                transform var(--dur-entrance) var(--ease-out);
  }
  .enter.enter--armed { opacity: 0; transform: translateY(var(--rise)); }
  .enter.enter--armed.is-in { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary { transition: none; }
}