/**
 * rovvi-ui.css — the Rovvi primitive component classes (Phase 1).
 *
 * Built ENTIRELY on the --rv-* tokens (rovvi.css) so it themes automatically and
 * carries no raw hex. These are the shared recipes that replace the three
 * divergent button/card/pill implementations across the old systems. The .astro
 * primitives in components/ui/ emit these classes; pages can also use them directly.
 *
 * Namespace: every class is prefixed `rv-` to avoid colliding with the legacy
 * per-page styles during the migration window.
 */

/* ── Buttons ─────────────────────────────────────────────────────── */
.rv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--rv-font-sans); font-weight:600; font-size:1rem; line-height:1; cursor:pointer;
  border-radius:var(--rv-radius-pill); padding:.72rem 1.25rem; border:1px solid transparent;
  transition:transform var(--rv-dur) var(--rv-ease), box-shadow var(--rv-dur) var(--rv-ease), background var(--rv-dur); text-decoration:none; }
.rv-btn:hover{ transform:translateY(-1px); }
.rv-btn:focus-visible{ outline:2px solid var(--rv-focus); outline-offset:3px; }
.rv-btn--primary{ background:var(--rv-brand); color:var(--rv-on-brand); box-shadow:0 12px 26px -12px var(--rv-brand); }
.rv-btn--primary:hover{ background:var(--rv-brand-strong); }
.rv-btn--ghost{ background:transparent; color:var(--rv-ink); border-color:var(--rv-line-strong); }
.rv-btn--ghost:hover{ border-color:var(--rv-brand); color:var(--rv-brand); }
.rv-btn--sm{ padding:.5rem .9rem; font-size:.9rem; }
.rv-btn--block{ width:100%; }

/* ── Cards / surfaces ───────────────────────────────────────────── */
.rv-card{ background:var(--rv-surface); border:1px solid var(--rv-line); border-radius:var(--rv-radius-card);
  padding:22px; box-shadow:var(--rv-shadow-card); }
.rv-card--pop{ transition:transform var(--rv-dur-lg) var(--rv-ease), box-shadow var(--rv-dur-lg) var(--rv-ease); }
.rv-card--pop:hover{ transform:translateY(-3px); box-shadow:var(--rv-shadow-pop); }

/* ── Pills / chips ──────────────────────────────────────────────── */
.rv-chip{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--rv-font-sans); font-size:.78rem;
  font-weight:600; color:var(--rv-brand); background:var(--rv-brand-soft);
  border:1px solid color-mix(in oklab, var(--rv-brand) 24%, transparent); border-radius:var(--rv-radius-pill); padding:.24rem .62rem; }

/* ── Trust badge (reserved GOLD register — verification/credentials) ─ */
.rv-badge{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--rv-font-sans); font-size:.76rem;
  font-weight:600; color:var(--rv-gold-ink); background:var(--rv-gold-soft);
  border:1px solid color-mix(in oklab, var(--rv-gold) 32%, transparent); border-radius:var(--rv-radius-pill); padding:.28rem .6rem; }
.rv-badge svg{ color:var(--rv-gold); flex:0 0 auto; }

/* ── The Rovvi dot (the signature mark) ─────────────────────────── */
.rv-dot{ --d:18px; width:var(--d); height:var(--d); border-radius:50%; flex:0 0 auto; display:inline-block;
  background:radial-gradient(120% 120% at 30% 25%, var(--rv-teal-bright), var(--rv-brand) 46%, var(--rv-glow) 108%);
  box-shadow:0 2px 10px -2px var(--rv-brand), 0 0 22px -6px var(--rv-glow); }
.rv-dot--gold{ background:radial-gradient(120% 120% at 30% 25%, var(--rv-gold-hi), var(--rv-gold) 55%, var(--rv-gold-ink) 115%);
  box-shadow:0 2px 10px -3px var(--rv-gold); }

/* ── Type helpers ───────────────────────────────────────────────── */
.rv-kick{ font-family:var(--rv-font-sans); font-weight:600; font-size:.74rem; letter-spacing:var(--rv-tracking-kick);
  text-transform:uppercase; color:var(--rv-brand); }
.rv-em{ font-family:var(--rv-font-cert); font-style:italic; font-weight:500; }
h1.rv-h1,.rv-h1{ font-family:var(--rv-font-display); font-weight:600; line-height:1.08; text-wrap:balance; }
.rv-lead{ color:var(--rv-ink-2); font-size:1.12rem; }

/* ── Section rhythm ─────────────────────────────────────────────── */
.rv-section{ padding:64px 0; }
.rv-wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion:reduce){ .rv-btn:hover,.rv-card--pop:hover{ transform:none; } }