/* ============================================================
   Component: ALERT / CALLOUT
   Variants: info, success, warning, danger
   Styles: soft (default), outline, surface
   Sizes: sm, default, lg
   ============================================================ */

/* ── Base ── */
.alert{padding:14px 18px;border-radius:var(--border-radius);font-size:.84rem;line-height:1.6;display:flex;align-items:flex-start;gap:12px;border:1px solid transparent}
.alert__icon{flex-shrink:0;font-size:1rem;line-height:1.4}
.alert__body{flex:1;min-width:0}
.alert__title{font-weight:700;margin:0 0 2px;font-size:.88rem}
.alert__msg{margin:0;opacity:.85}
.alert__close{flex-shrink:0;background:none;border:none !important;font-size:1rem;cursor:pointer;opacity:.5;padding:0 2px !important;line-height:1.4;transition:opacity .15s;margin:0 !important}
.alert__close:hover{opacity:1}

/* ── Soft variants (default) ── */
.alert--info{background:color-mix(in srgb,var(--color-link)10%,transparent);border-color:color-mix(in srgb,var(--color-link)25%,transparent);color:var(--color-link)}
.alert--success{background:color-mix(in srgb,var(--color-success)10%,transparent);border-color:color-mix(in srgb,var(--color-success)28%,transparent);color:var(--color-success-hover)}
.alert--warning{background:color-mix(in srgb,var(--color-warning)10%,transparent);border-color:color-mix(in srgb,var(--color-warning)28%,transparent);color:var(--color-warning-hover)}
.alert--danger{background:color-mix(in srgb,var(--color-danger)8%,transparent);border-color:color-mix(in srgb,var(--color-danger)22%,transparent);color:var(--color-danger-hover)}

/* ── Outline variants ── */
.alert--outline.alert--info{background:transparent;border-color:var(--color-link);color:var(--color-link)}
.alert--outline.alert--success{background:transparent;border-color:var(--color-success);color:var(--color-success)}
.alert--outline.alert--warning{background:transparent;border-color:var(--color-warning);color:var(--color-warning)}
.alert--outline.alert--danger{background:transparent;border-color:var(--color-danger);color:var(--color-danger)}

/* ── Surface variant ── */
.alert--surface{background:var(--color-bg);border-color:var(--color-bg-secondary);box-shadow:0 1px 3px color-mix(in srgb,var(--color-text-secondary)10%,transparent);color:var(--color-text)}
.alert--surface .alert__icon{color:var(--color-link)}

/* ── Sizes ── */
.alert--sm{padding:8px 14px;font-size:.78rem;gap:8px;border-radius:calc(var(--border-radius)*.75)}
.alert--sm .alert__icon{font-size:.85rem}
.alert--sm .alert__title{font-size:.8rem}
.alert--lg{padding:18px 24px;font-size:.92rem;gap:16px}
.alert--lg .alert__title{font-size:.95rem}