/* ==========================================================================
   Button — capsule, uppercase, 48px. Imported by homepage.css.
   --------------------------------------------------------------------------
   NOTE ON HOVER: the design system's Button.jsx lightens a filled primary
   on hover (stone-800 → stone-600), which contradicts its own written rule
   ("never lighten on hover"). This CSS darkens instead (stone-800 → stone-900,
   press stone-950). Flagged in the handoff README — change it back only if
   the design system is corrected the other way.
   ========================================================================== */

.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--size-button);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;      /* button labels are ALWAYS one line */
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-hover) var(--ease-out),
    border-color var(--duration-hover) var(--ease-out),
    color var(--duration-hover) var(--ease-out),
    transform var(--duration-hover) var(--ease-out);
}

.vc-btn:active {
  transform: scale(var(--press-scale)); /* the only transform on press */
}

.vc-btn--full {
  display: flex;
  width: 100%;
}

/* Primary — the intake CTA.
   Het label staat in zand en niet in wit: zachter tegen het donkerbruin, en
   met 7,2:1 nog ruim boven de AA-eis. */
.vc-btn--primary {
  background: var(--brand-dark);
  color: var(--brand-sand);
  border-color: var(--brand-dark);
}

.vc-btn--primary:hover {
  background: var(--stone-900);
  border-color: var(--stone-900);
  color: var(--brand-sand);
}

.vc-btn--primary:active {
  background: var(--stone-950);
  border-color: var(--stone-950);
}

/* Secondary — outlined on light surfaces. */
.vc-btn--secondary {
  color: var(--text-primary);
  border-color: var(--border-default);
}

.vc-btn--secondary:hover {
  background: var(--state-hover-wash);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Inverse — filled white, used inside the dark contact block. */
.vc-btn--inverse {
  background: var(--brand-white);
  color: var(--text-primary);
}

.vc-btn--inverse:hover {
  background: var(--sand-100);
  color: var(--text-primary);
}

/* Outline inverse — the phone number on imagery and on the dark block. */
.vc-btn--outlineInverse {
  color: var(--text-inverse);
  border-color: var(--border-inverse);
}

.vc-btn--outlineInverse:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: var(--brand-white);
  color: var(--text-inverse);
}

.vc-btn--ghost {
  color: var(--text-primary);
}

.vc-btn--ghost:hover {
  background: var(--state-hover-wash);
  color: var(--state-hover-ink);
}

.vc-btn[aria-disabled="true"],
.vc-btn:disabled {
  background: var(--state-disabled-surface);
  color: var(--state-disabled-ink);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   Card — square, hairline, no shadow. Depth comes from tone.
   ========================================================================== */

.vc-card {
  display: block;
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-none);
  padding: var(--pad-card);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.vc-card--tight {
  padding: var(--pad-card-tight);
}

.vc-card--sand {
  background: var(--surface-sand);
}

.vc-card--interactive:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-card-hover);
}

a.vc-card,
a.vc-card:hover {
  border-color: var(--border-hairline);
  color: var(--text-primary);
}

/* ==========================================================================
   Eyebrow — the brand's only label style, lifted from the logo subtitle.
   ========================================================================== */

.vc-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.vc-eyebrow--primary {
  color: var(--text-primary);
}

.vc-eyebrow--inverse {
  color: var(--text-inverse-muted);
}

/* ==========================================================================
   Icon — Lucide at 1.5px stroke, inheriting the current text colour.
   ========================================================================== */

.vc-icon {
  flex: 0 0 auto;
  color: currentColor;
}