/* =============================================================================
   COMPONENT: status — badges & callouts. This is WHERE COLOR LIVES.
   Every status conveys meaning with an ICON + TEXT as well as color, so it
   is legible to color-blind users and screen readers (see DESIGN.md:
   "Status is communicated with more than color").
   ========================================================================== */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--color-text-muted);
  }
  .badge--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
  .badge--success { background: var(--status-success-bg); color: var(--status-success-fg); }
  .badge--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
  .badge--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
  /* Accent (plum) badge: the Admin role chip and other selection/identity
     markers. The word inside carries the meaning, so color stays a reinforcement. */
  .badge--accent  { background: var(--accent-tint); color: var(--accent); }

  /* Callout: a block-level status message (flash messages, inline errors). */
  .callout {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: var(--border-width) solid transparent;
    background: var(--surface-sunken);
  }
  .callout__icon { flex: none; }
  .callout__body {
    margin: 0;
    flex: 1 1 auto;
    min-inline-size: 0;
  }
  .callout--info    { background: var(--status-info-bg);    color: var(--status-info-fg);    border-color: color-mix(in srgb, var(--status-info-fg) 25%, transparent); }
  .callout--success { background: var(--status-success-bg); color: var(--status-success-fg); border-color: color-mix(in srgb, var(--status-success-fg) 25%, transparent); }
  .callout--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: color-mix(in srgb, var(--status-warning-fg) 25%, transparent); }
  .callout--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg);  border-color: color-mix(in srgb, var(--status-danger-fg) 25%, transparent); }
}