/* ═══════════════════════════════════════════════════════════════════════
   VecNine — Shared UI components v2
   Session 128. Add <link rel="stylesheet" href="/components.css"> after
   tokens.css to opt in.

   Provides:
   - .vn-btn variants (primary, secondary, ghost — flat, no gradients)
   - .vn-card surfaces
   - .vn-tag for small labels (was: ad-hoc 8.5–10px eyebrow tags)
   - .vn-eyebrow for section labels (sparingly!)
   - .vn-prose for editorial reading columns

   These coexist with existing page-specific classes; they're an
   opt-in vocabulary for new and migrated surfaces.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BUTTONS — flat, no gradients, three sizes, three variants ───── */

.vn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-md);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-1s);
  font-weight: var(--weight-bold);
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  white-space: nowrap;
}

.vn-btn-sm { height: var(--btn-sm); font-size: var(--text-0); padding: 0 var(--space-4); }
.vn-btn-lg { height: var(--btn-lg); font-size: var(--text-2s); padding: 0 var(--space-6); }

/* Primary — subtle vertical gradient gives the button physical depth
   without slipping into SaaS-chrome territory. Inset highlight catches
   the eye like a polished surface; soft shadow grounds it. Hover
   brightens the top stop instead of lifting/glowing. */
.vn-btn-primary {
  background: linear-gradient(180deg, var(--or) 0%, var(--or-d) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.vn-btn-primary:hover {
  background: linear-gradient(180deg, #ef7a3d 0%, var(--or) 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.vn-btn-primary:active {
  background: var(--or-d);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

/* Secondary — neutral surface, used for "View Lab Pro", "Learn more". */
.vn-btn-secondary {
  background: var(--s2);
  color: var(--text-1);
}
.vn-btn-secondary:hover { background: var(--s3); }

/* Ghost — text-only link with single underline on hover. */
.vn-btn-ghost {
  background: transparent;
  color: var(--text-2);
  padding: 0 var(--space-3);
}
.vn-btn-ghost:hover { color: var(--text-1); background: var(--s1); }

/* Editorial link — for inline "Read more →" type CTAs. */
.vn-link {
  color: var(--or);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,105,42,.3);
  transition: border-color var(--dur-fast) var(--ease);
}
.vn-link:hover { border-bottom-color: var(--or); }

/* ── CARDS ──────────────────────────────────────────────────────── */

.vn-card {
  background: var(--s1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.vn-card-lg { padding: var(--space-6); }

/* Featured card — for the "Member" pricing tier and similar.
   No gradient; uses a subtle tinted background and a clear orange border. */
.vn-card-featured {
  background: var(--or-faint);
  border: 1px solid rgba(232,105,42,.32);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* ── TAGS & EYEBROWS (use sparingly!) ──────────────────────────── */

/* Tag — for tier labels, status indicators. */
.vn-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-0);
  font-weight: var(--weight-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--s2);
  border: 1px solid var(--border-1);
}
.vn-tag-brand { color: var(--or); background: var(--or-faint); border-color: rgba(232,105,42,.32); }
.vn-tag-gold { color: var(--gold); background: var(--gold-faint); border-color: rgba(201,169,110,.32); }
.vn-tag-success { color: var(--success); background: rgba(122,184,152,.08); border-color: rgba(122,184,152,.32); }

/* Eyebrow — for section labels. ONE per page max in the v2 system.
   v1 had eyebrows on every section; v2 trusts the headline. */
.vn-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-0);
  font-weight: var(--weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-3);
}

/* ── HEADINGS — scale-locked. Use h1..h4, no arbitrary sizes. ───── */

.vn-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-8s);
  line-height: var(--lh-8);
  letter-spacing: -.015em;
  color: var(--text-1);
}
.vn-h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-6s);
  line-height: var(--lh-6);
  letter-spacing: -.01em;
  color: var(--text-1);
}
.vn-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-body);
  font-size: var(--text-5s);
  line-height: var(--lh-5);
  color: var(--text-1);
}
.vn-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-4s);
  line-height: var(--lh-4);
  color: var(--text-1);
}

/* ── PROSE — editorial reading column ──────────────────────────── */

.vn-prose {
  max-width: var(--layout-reading);
  font-size: var(--text-3s);
  line-height: var(--lh-3);
  color: var(--text-2);
}
.vn-prose p { margin-bottom: var(--space-5); }
.vn-prose strong { color: var(--text-1); font-weight: var(--weight-medium); }
.vn-prose a { color: var(--or); border-bottom: 1px solid rgba(232,105,42,.3); }
.vn-prose a:hover { border-bottom-color: var(--or); }