/* ==========================================================================
   theme-vivid.css — "Vivid" personality.
   Saturated violet and pink, soft radii, gradient hero and glowing CTAs.
   Tokens live in tokens.css; this file only changes composition and emphasis.
   ========================================================================== */

.site-header {
  border-bottom: 3px solid var(--accent);
}

.site-nav a {
  border-radius: var(--radius-pill);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: var(--brand-soft);
}

.hero {
  background: var(--gradient-hero);
}

.hero h1 {
  text-wrap: balance;
  /* Saturated colour already carries the emphasis, so the type can relax a touch. */
  letter-spacing: -0.025em;
}

.hero-card {
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.btn-primary {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}

.card,
.step,
.quote,
.contact-form {
  border-radius: var(--radius-lg);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* A filled chip rather than an outline: the soft tint is a verified contrast
   pair against the accent, so the glyph stays legible. */
.card-icon {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
}

.step::before {
  background: var(--brand);
  color: var(--brand-ink);
}

.quote {
  border-left-width: 5px;
  border-left-color: var(--accent);
}

/* White sits on both ends of the gradient, so the call band keeps its verified
   ink rather than borrowing a token that only holds on one stop. */
.callband {
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  color: #ffffff;
}

.callband .btn-primary {
  box-shadow: var(--shadow-sm);
}

.footer-brand {
  letter-spacing: 0.02em;
}