/* Callout.css - Accent-bordered section for highlighting content */
/* SPACING CONTRACT:
   - Internal padding: var(--space-4) default
   - External margins: NONE - Parent controls */

.callout {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-layer-2);
    border-radius: var(--border-radius-md);
    border-left: 3px solid var(--color-primary);
}

/* Size variants */
.callout-sm {
    padding: var(--space-3);
    gap: var(--space-2);
}

/* Color variants */
.callout-primary {
    border-left-color: var(--color-primary);
    background: var(--bg-layer-2);
}

.callout-info {
    border-left-color: var(--color-info);
    background: var(--color-info-light, rgba(59, 130, 246, 0.08));
}

.callout-warning {
    border-left-color: var(--color-warning);
    background: var(--color-warning-light, rgba(245, 158, 11, 0.08));
}

.callout-success {
    border-left-color: var(--color-success);
    background: var(--color-success-light, rgba(34, 197, 94, 0.08));
}

.callout-error {
    border-left-color: var(--color-error);
    background: var(--color-error-light, rgba(220, 38, 38, 0.08));
}

/* Icon */
.callout-icon {
    flex-shrink: 0;
    color: inherit;
}

.callout-primary .callout-icon { color: var(--color-primary); }
.callout-info .callout-icon { color: var(--color-info); }
.callout-warning .callout-icon { color: var(--color-warning); }
.callout-success .callout-icon { color: var(--color-success); }
.callout-error .callout-icon { color: var(--color-error); }

/* Content */
.callout-content {
    flex: 1;
    min-width: 0;
}

.callout-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.callout-sm .callout-title {
    font-size: var(--text-sm);
}

.callout-body {
    color: var(--text-body);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.callout-body p {
    margin: 0;
}

.callout-body p + p {
    margin-top: var(--space-2);
}

/* Form fields inside callouts */
.callout .form-field {
    margin-bottom: 0;
}

.callout input,
.callout select,
.callout textarea {
    background: var(--bg-surface);
}