body {
    color: var(--color-text);
    background: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title {
    font-family: var(--font-heading);
}

.dmSerif {
    font-family: var(--font-display);
}

.heroGrid {
    min-height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(199, 1, 106, 0.35), transparent 0 28%),
        radial-gradient(circle at 80% 0%, rgba(19, 67, 244, 0.3), transparent 0 24%),
        linear-gradient(135deg, rgba(19, 19, 19, 1) 0%, rgba(42, 17, 87, 1) 45%, rgba(19, 67, 244, 0.9) 100%);
}

.white a:not(.button),
.dark a:not(.button),
.bgBlack a:not(.button) {
    color: inherit;
}

.white a:not(.button):hover,
.dark a:not(.button):hover,
.bgBlack a:not(.button):hover {
    color: var(--color-accent-3);
}
.component-demo {
    background:
        radial-gradient(circle at top left, rgba(19, 67, 244, 0.06), transparent 0 24%),
        radial-gradient(circle at top right, rgba(199, 1, 106, 0.05), transparent 0 20%),
        var(--color-bg);
}

.component-demo .c-feature-split__panel,
.component-demo .c-logo-pill,
.component-demo .c-service-card,
.component-demo .c-post-card,
.component-demo .c-chunk-card {
    background: rgba(255, 255, 255, 0.94);
}