/* ============================================================
   ConnectX brand theme — accent colors drawn from the app icon's
   spectrum (pink → orange → yellow → teal → blue → purple) on the
   site's light base. Loaded AFTER /assets/css/style.css.
   ============================================================ */

:root {
  --accent: #ff2d78;
  --accent-ink: #d6246e;
  --accent-soft: #ffe9f2;
  --teal: #00b5a3;
  --teal-soft: #e0f7f4;
  --amber: #ff8a00;
  --amber-soft: #fff1e0;
}

/* Spectrum line under eyebrows — the icon's full gradient */
.eyebrow::before {
  background: linear-gradient(90deg, #ff2d78, #ff8a00, #ffd400, #22c55e, #00b5d8, #2a5cff);
}

/* Gradient headline text */
.grad-text {
  background: linear-gradient(92deg, #ff2d78 0%, #ff8a00 32%, #00b5a3 64%, #2a5cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary buttons pick up the icon's pink → purple → blue sweep */
.btn-primary {
  background: linear-gradient(92deg, #ff2d78, #8b3dff 55%, #2a5cff);
  box-shadow: 0 8px 20px rgba(139, 61, 255, 0.28);
}

.btn-primary:hover {
  background: linear-gradient(92deg, #e62069, #7a2ef0 55%, #1f4df0);
}

/* Hero dot-grid tinted to the brand pink instead of ultramarine */
.hero {
  background-image: radial-gradient(rgba(255, 45, 120, 0.09) 1.2px, transparent 1.2px);
}

/* The real app icon as the brand mark */
img.brand-mark {
  border-radius: 7px;
}