:is(.ccvaa-surface--brand, .ccvaa-card--cta) {
    background: var(--ccvaa-color-surface-base);
    --ccvaa-color-text-primary: var(--ccvaa-brand-ultra-light);
    --ccvaa-color-text-heading: var(--ccvaa-brand-ultra-light);
    --ccvaa-color-text-brand: var(--ccvaa-brand-ultra-light);
    --ccvaa-color-text-secondary: var(--ccvaa-brand-light);
    --ccvaa-color-text-disabled: var(--ccvaa-brand-soft);
    --ccvaa-color-surface-base: var(--ccvaa-brand-strong);
    --ccvaa-color-surface-raised: var(--ccvaa-brand-ultra-dark);
    --ccvaa-color-surface-muted: var(--ccvaa-brand-dark);
    --ccvaa-color-border-base: var(--ccvaa-brand);
    --ccvaa-color-border-secondary: var(--ccvaa-brand-soft);
    --ccvaa-card-border-color: var(--ccvaa-color-border-secondary);
    --ccvaa-color-action-primary: var(--ccvaa-white);
    --ccvaa-color-action-primary-hover: var(--ccvaa-brand-light);
    --ccvaa-color-action-on-primary: var(--ccvaa-brand-dark);
    --ccvaa-color-action-on-primary-hover: var(--ccvaa-brand-ultra-dark);
    --ccvaa-color-link: var(--ccvaa-brand-light);
    --ccvaa-color-link-hover: var(--ccvaa-white);
    --ccvaa-field-input-border: var(--ccvaa-color-border-secondary);
    --ccvaa-btn-bg: var(--ccvaa-color-action-primary);
    --ccvaa-btn-bg-hover: var(--ccvaa-color-action-primary-hover);
    --ccvaa-btn-text-color: var(--ccvaa-color-action-on-primary);
    --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-on-primary-hover);
    --ccvaa-btn-border-color: var(--ccvaa-color-action-primary);
    --ccvaa-btn-border-color-hover: var(--ccvaa-color-action-primary-hover);

    .ccvaa-btn--outline {
        --ccvaa-btn-text-color: var(--ccvaa-color-action-primary);
        --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-primary);
        --ccvaa-btn-bg-hover: color-mix(
            in oklch,
            var(--ccvaa-color-action-primary) 20%,
            transparent
        );
        border-color: var(--ccvaa-color-action-primary);
    }

    .ccvaa-btn--ghost {
        --ccvaa-btn-text-color: color-mix(
            in oklch,
            var(--ccvaa-color-action-primary) 85%,
            transparent
        );
        --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-primary);
        --ccvaa-btn-bg-hover: color-mix(
            in oklch,
            var(--ccvaa-color-action-primary) 10%,
            transparent
        );
        border-color: color-mix(
            in oklch,
            var(--ccvaa-color-border-secondary) 50%,
            transparent
        );

        &:is(:hover, :focus-visible):not(:disabled):not(
                [aria-disabled='true']
            ) {
            border-color: color-mix(
                in oklch,
                var(--ccvaa-color-border-secondary) 65%,
                transparent
            );
        }
    }

    .ccvaa-btn--nav {
        --ccvaa-btn-text-color: var(--ccvaa-color-text-primary);
        --ccvaa-btn-text-color-hover: var(--ccvaa-color-text-primary);
        --ccvaa-btn-bg-hover: var(--ccvaa-color-surface-muted);
        border-color: var(--ccvaa-color-border-secondary);
    }
}

.ccvaa-surface--brand {
  background: var(--ccvaa-color-surface-base);
}