.tenant-theme-custom {
    --tenant-page-start: color-mix(in srgb, var(--tenant-primary) 3%, white);
    --tenant-page-end: color-mix(in srgb, var(--tenant-primary) 12%, white);
    --tenant-section-background: color-mix(in srgb, var(--tenant-primary) 8%, white);
    --tenant-panel-start: white;
    --tenant-panel-end: color-mix(in srgb, var(--tenant-primary) 6%, white);
    --tenant-card-radius: 22px;
    --tenant-control-radius: 16px;
    background: var(--tenant-page-start);
}

.tenant-theme-custom .site-header {
    border-bottom-color: color-mix(in srgb, var(--tenant-primary) 22%, transparent);
    background: color-mix(in srgb, var(--tenant-page-start) 94%, transparent);
}

.tenant-theme-custom .home-hero {
    background:
        radial-gradient(
            circle at 76% 18%,
            color-mix(in srgb, var(--tenant-primary) 23%, white),
            transparent 31%),
        linear-gradient(
            145deg,
            var(--tenant-page-start),
            var(--tenant-page-end));
}

.tenant-theme-custom .home-marquee {
    background: var(--tenant-secondary);
}

.tenant-theme-custom .home-experience {
    background: var(--tenant-section-background);
}

.tenant-theme-custom .home-visual-card,
.tenant-theme-custom .home-hero-badge,
.tenant-theme-custom .home-service-card,
.tenant-theme-custom .treatment-category-card,
.tenant-theme-custom .appointment-card {
    border-color: color-mix(in srgb, var(--tenant-primary) 25%, transparent);
}

.tenant-theme-custom .home-button-primary,
.tenant-theme-custom .site-nav-cta,
.tenant-theme-custom .treatment-book-button {
    background: var(--tenant-secondary);
}

.tenant-theme-custom .home-button-arrow {
    background: var(--tenant-primary);
}