/* ============================================================
   RACE FOR IMPACT — Stockholm sauna microsite
   site-specific styles. RFI tokens live in /styles/rfi-tokens.css
   ============================================================ */

html, body { background: #000; color: #fff; }
body { font-family: "Chakra Petch", system-ui, sans-serif; }

/* tap-target floor: 56px+ on mobile — expo-hall context, QR arrivals */
.rfi-btn-primary,
.rfi-btn-accent,
.rfi-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
  padding: 18px 22px;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, background-color .15s ease;
  width: 100%;
}
.rfi-btn-primary  { background: #3759B6; color: #fff; }
.rfi-btn-accent   { background: #97CEFF; color: #000; }
.rfi-btn-ghost    { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #97CEFF; }

/* CTA label — clamps from 16px on phones up to 19px on desktop */
.rfi-btn-label {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 19px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.rfi-btn-primary:hover,
.rfi-btn-accent:hover,
.rfi-btn-ghost:hover  { filter: brightness(1.08); }
.rfi-btn-primary:active,
.rfi-btn-accent:active,
.rfi-btn-ghost:active { transform: translateY(1px); filter: brightness(.92); }

@media (min-width: 640px) {
  .rfi-btn-primary, .rfi-btn-accent, .rfi-btn-ghost {
    width: auto;
  }
}

/* ── Misc ───────────────────────────────────────────────────── */
.rfi-rule { display:block; width:100%; height:4px; background:#97CEFF; border:0; margin:0; }
.rfi-rule--blue { background:#3759B6; }

::selection { background: #97CEFF; color: #000; }

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