:root {
    --ai-callout-link: var(--bs-primary);
    --ai-info-text-emphasis: #055160;
    --ai-info-bg-subtle: #cff4fc;
    --ai-info-border-subtle: #9eeaf9;

    --ai-success-text-emphasis: #082a1b;
    --ai-success-bg-subtle: #aae0c7;
    --ai-success-border-subtle: #228154;

    --ai-warning-text-emphasis: #664d03;
    --ai-warning-bg-subtle: #fff3cd;
    --ai-warning-border-subtle: #ffe69c;

    --ai-danger-text-emphasis: #721c24;
    --ai-danger-bg-subtle: #f8d7da;
    --ai-danger-border-subtle: #f5c6cb;
}

.callout {
    --bs-link-color-rgb: var(--ai-callout-link);
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--ai-callout-color, inherit);
    background-color: var(--ai-callout-bg, var(--bs-gray-100));
    border-left: 0.25rem solid var(--ai-callout-border, var(--bs-gray-300));
}

.callout-info {
    --ai-callout-color: var(--ai-info-text-emphasis);
    --ai-callout-bg: var(--ai-info-bg-subtle);
    --ai-callout-border: var(--ai-info-border-subtle);
}

.callout-success {
    --ai-callout-color: var(--ai-success-text-emphasis);
    --ai-callout-bg: var(--ai-success-bg-subtle);
    --ai-callout-border: var(--ai-success-border-subtle);
}

.callout-warning {
    --ai-callout-color: var(--ai-warning-text-emphasis);
    --ai-callout-bg: var(--ai-warning-bg-subtle);
    --ai-callout-border: var(--ai-warning-border-subtle);
}

.callout-danger {
    --ai-callout-color: var(--ai-danger-text-emphasis);
    --ai-callout-bg: var(--ai-danger-bg-subtle);
    --ai-callout-border: var(--ai-danger-border-subtle);
}

.callout-compact {
    padding: 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}