:root {
  --cne-purple: #7a5cff;
  --cne-citrus: #ffd43b;
  --cne-aqua: #39d0c2;
  --cne-porcelain: #f6f8fb;
  --cne-graphite: #1f2937;
  --cne-muted: #6b7280;
}

html,
body {
  background: var(--cne-porcelain);
  color: var(--cne-graphite);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.bg-porcelain {
  background: var(--cne-porcelain) !important;
}
.bg-white {
  background: #fff !important;
}
.text-graphite {
  color: var(--cne-graphite) !important;
}
.text-muted {
  color: var(--cne-muted) !important;
}

a {
  color: var(--cne-purple);
}
a:hover {
  color: #8d74ff;
}

.fw-extrabold {
  font-weight: 800;
}

.airy-hero {
  background: radial-gradient(
      720px 340px at 20% -12%,
      rgba(122, 92, 255, 0.14),
      transparent
    ),
    radial-gradient(
      720px 340px at 85% -18%,
      rgba(57, 208, 194, 0.14),
      transparent
    ),
    var(--cne-porcelain);
}

.card.soft {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(31, 41, 55, 0.06);
}

.card.outline {
  background: #fff;
  border: 1px dashed rgba(122, 92, 255, 0.5);
  border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(31, 41, 55, 0.06);
}

.card.highlight {
  background: linear-gradient(
    180deg,
    rgba(255, 212, 59, 0.18),
    rgba(57, 208, 194, 0.14)
  );
  border: 1px solid rgba(255, 212, 59, 0.45);
  border-radius: 1rem;
  box-shadow: 0 10px 32px rgba(31, 41, 55, 0.1);
}

.card-dashed {
  background: #fff;
  border: 1px dashed rgba(57, 208, 194, 0.5);
  border-radius: 1rem;
}

.btn-citrus {
  background: var(--cne-citrus);
  color: #3a2f00;
  border: none;
}
.btn-citrus:hover {
  filter: brightness(1.05);
  color: #2a2100;
}

.text-purple {
  color: var(--cne-purple) !important;
}
.text-aqua {
  color: var(--cne-aqua) !important;
}

.navbar .nav-link {
  color: var(--cne-muted);
}
.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--cne-graphite);
}

.hp-field {
  position: absolute;
  left: -10000px;
  opacity: 0;
}
