/* =============================================================
 * VI Component: Alert
 * vi-alert
 * =============================================================
 *
 * VARIANTS:    vi-alert--success | vi-alert--warning |
 *              vi-alert--error | vi-alert--info | vi-alert--neutral
 * SLOTS:       vi-alert__title | vi-alert__text | vi-alert__actions
 * MODIFIERS:   vi-alert--dismissible (shows close button slot)
 *
 * USAGE PATTERN (simple):
 *   <div class="vi-alert vi-alert--success" role="alert">
 *     <p class="vi-alert__text">Changes saved successfully.</p>
 *   </div>
 *
 * USAGE PATTERN (full):
 *   <div class="vi-alert vi-alert--warning" role="alert">
 *     <div class="vi-alert__title">Heads up</div>
 *     <p class="vi-alert__text">Your session expires in 5 minutes.</p>
 *     <div class="vi-alert__actions">
 *       <button class="vi-btn vi-btn--ghost vi-btn--sm">Dismiss</button>
 *       <button class="vi-btn vi-btn--secondary vi-btn--sm">Extend</button>
 *     </div>
 *   </div>
 *
 * ACCESSIBILITY: Always include role="alert" for error/warning alerts.
 *                Use role="status" for success/info.
 *
 * TOKENS: Tier 3 (--alert-*) defined below, mapping to Tier 2 roles.
 *         Rules reference Tier 3 ONLY — never --primitive-* or
 *         Tier 2 directly. Info/neutral fills consume the surface.*
 *         + on-surface.* AA pairs (§20 boundary).
 * ============================================================= */

/* ── Tier 3 component tokens ── */
.vi-alert {
  /* structure */
  --alert-gap:          var(--spacing-component-gap-sm);
  --alert-padding-y:    var(--spacing-component-padding-md);
  --alert-padding-x:    var(--spacing-component-padding-lg);
  --alert-radius:       var(--radius-alert);
  --alert-accent-width: var(--border-width-thick);

  /* slot: title */
  --alert-title-font-size:   var(--font-size-sm);
  --alert-title-font-weight: var(--font-weight-semibold);
  --alert-title-leading:     var(--font-leading-snug);

  /* slot: text */
  --alert-text-font-size: var(--font-size-sm);
  --alert-text-leading:   var(--font-leading-relaxed);

  /* variant: success / warning / error (feedback roles) */
  --alert-success-bg:   var(--color-feedback-success-bg);
  --alert-success-text: var(--color-feedback-success-text);
  --alert-warning-bg:   var(--color-feedback-warning-bg);
  --alert-warning-text: var(--color-feedback-warning-text);
  --alert-error-bg:     var(--color-feedback-error-bg);
  --alert-error-text:   var(--color-feedback-error-text);

  /* variant: info (surface.accent AA pair) */
  --alert-info-bg:      var(--color-surface-accent);
  --alert-info-text:    var(--color-on-surface-accent);

  /* variant: neutral */
  --alert-neutral-bg:     var(--color-surface-subtle);
  --alert-neutral-text:   var(--color-text-primary);
  --alert-neutral-border: var(--color-border-strong);
}

/* ── Base ── */
.vi-alert {
  display:       flex;
  flex-direction: column;
  gap:           var(--alert-gap);
  padding:       var(--alert-padding-y) var(--alert-padding-x);
  border-radius: var(--alert-radius);
  border-left:   var(--alert-accent-width) solid currentColor;
}

.vi-alert__title {
  font-size:   var(--alert-title-font-size);
  font-weight: var(--alert-title-font-weight);
  line-height: var(--alert-title-leading);
}

.vi-alert__text {
  font-size:   var(--alert-text-font-size);
  line-height: var(--alert-text-leading);
  margin:      0;
}

.vi-alert__actions {
  display:    flex;
  gap:        var(--alert-gap);
  margin-top: var(--alert-gap);
}


/* ── Variant: Success ── */
.vi-alert--success {
  background-color: var(--alert-success-bg);
  color:            var(--alert-success-text);
}

/* ── Variant: Warning ── */
.vi-alert--warning {
  background-color: var(--alert-warning-bg);
  color:            var(--alert-warning-text);
}

/* ── Variant: Error ── */
.vi-alert--error {
  background-color: var(--alert-error-bg);
  color:            var(--alert-error-text);
}

/* ── Variant: Info ── */
.vi-alert--info {
  background-color: var(--alert-info-bg);
  color:            var(--alert-info-text);
}

/* ── Variant: Neutral ── */
.vi-alert--neutral {
  background-color: var(--alert-neutral-bg);
  color:            var(--alert-neutral-text);
  border-left-color: var(--alert-neutral-border);
}