:root {
  --primary: #7c3aed;
  --primary-hover: #6826cf;
  --primary-light: #f3edff;
  --sidebar: #110d1d;
}

.app-sidebar {
  background: radial-gradient(circle at 18% 0, color-mix(in srgb, #7c3aed 32%, transparent), transparent 19rem), linear-gradient(180deg, #110d1d, color-mix(in srgb, #110d1d 82%, black));
}

.brand-mark {
  padding: 5px;
  background: color-mix(in srgb, #7c3aed 18%, transparent);
  border-color: color-mix(in srgb, #a3e635 35%, transparent);
}

.brand-mark img { width: 100%; height: 100%; display: block; border-radius: 10px; }

.home-overview, .legal-hero {
  background: radial-gradient(circle at 84% 8%, color-mix(in srgb, #a3e635 36%, transparent), transparent 20rem), radial-gradient(circle at 100% 100%, color-mix(in srgb, #7c3aed 44%, transparent), transparent 28rem), linear-gradient(135deg, #110d1d 0%, color-mix(in srgb, #110d1d 72%, #7c3aed) 58%, #7c3aed 135%);
}

.overview-copy h1 em { color: color-mix(in srgb, #a3e635 62%, white); }
.overview-kicker, .legal-kicker { color: color-mix(in srgb, #a3e635 45%, white); }
.overview-kicker > span { background: #a3e635; }
.category-dot::before { background: #7c3aed; }