/* Website kit — shared styles. Imports the system tokens. */
@import url('./tokens.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--rpr-paper);
  color: var(--fg-1);
  font-family: var(--font-body);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn-primary { background: var(--brand-primary); color: var(--rpr-paper); box-shadow: 0 1px 2px rgba(8,40,72,0.12); }
.btn-primary:hover { background: var(--rpr-navy-900); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: transparent; color: var(--brand-primary); border: 1.5px solid var(--brand-primary); padding: 11.5px 22.5px; }
.btn-secondary:hover { background: var(--bg-3); }
.btn-ghost { background: transparent; color: var(--brand-primary); padding: 12px 4px; }
.btn-ghost:hover { color: var(--rpr-navy-500); }
.btn-pill {
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--brand-primary);
  color: var(--rpr-paper);
}
.btn-pill:hover { background: var(--rpr-navy-900); }

/* ---------- containers ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

/* ---------- eyebrow ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin: 0 0 16px;
}

/* ---------- tags ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--rpr-forest-100);
  color: var(--rpr-forest-700);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.tag-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; display: inline-block; }
.tag-gold {
  background: var(--rpr-gold-400);
  color: var(--rpr-navy-800);
  padding: 7px 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------- icon helper ---------- */
.ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ic-lg { width: 28px; height: 28px; }

/* ---------- a-link strip ---------- */
.link-clean {
  color: var(--brand-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.link-clean:hover { border-bottom-color: currentColor; }

/* small utility */
.muted { color: var(--fg-3); }
.tick {
  width: 18px; height: 18px;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.bullet-row { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); color: var(--fg-1); }