/* =========================================================================
   VELVETCONNECT · BASE — element defaults + signature type utilities.
   Imported last by styles.css so consumers get a styled black canvas
   and the brand's wordmark/eyebrow/label helpers out of the box.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(200,164,93,0.30); color: var(--fg-strong); }

a { color: var(--fg-accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ---------- Headlines (Playfair) ---------- */
h1, .vc-h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--fg-strong); margin: 0; }
h2, .vc-h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--fg-strong); margin: 0; }
h3, .vc-h3 { font: var(--text-h3); color: var(--fg-strong); margin: 0; }
.vc-display { font: var(--text-display); letter-spacing: var(--tracking-tight); color: var(--fg-strong); margin: 0; }

p, .vc-p { font: var(--text-body); color: var(--fg-default); margin: 0; }
.vc-p-muted { color: var(--fg-muted); }
.vc-caption { font: var(--text-caption); color: var(--fg-muted); }

/* ---------- Wordmark — "VELVETCONNECT" ---------- */
.vc-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--fg-default);
}
.vc-wordmark__connect { color: var(--fg-accent); } /* "CONNECT" gilded */

/* ---------- Tagline — "VERIFIED · PRIVATE · DESIRED" ---------- */
.vc-tagline {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- Eyebrow — section labels ---------- */
.vc-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* ---------- Editorial serif accent (italic pull-quotes) ---------- */
.vc-editorial {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  color: var(--vc-rose-300);
}

/* ---------- Gilded text (gradient gold) ---------- */
.vc-gild {
  background: var(--vc-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Price ---------- */
.vc-price {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--fg-strong);
}