/* components.css — minimal cross-app components.
   Phase 2: アラート色バリアントのみ集約。.btn-*, .form-control, .data-table, .metric-card は
   各アプリで padding / font-size のチューニングが分かれるため、Phase 5 で精査するまで
   各アプリ CSS に残す。

   依存: tokens.css の --radius と semantic 色変数。 */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    font-size: 0.88rem;
}

/* Tokenized so alerts adapt to dark mode: --*-soft backgrounds flip to deep
   tones under [data-theme="dark"] (tokens.css), --text flips to a light
   foreground, and the --* accent border keeps the semantic colour cue in both
   modes. */
.alert-success { background: var(--success-soft); color: var(--text); border: 1px solid var(--success); }
.alert-error,
.alert-danger  { background: var(--danger-soft);  color: var(--text); border: 1px solid var(--danger); }
.alert-warning { background: var(--warning-soft); color: var(--text); border: 1px solid var(--warning); }
.alert-info    { background: var(--info-soft);    color: var(--text); border: 1px solid var(--info); }