/* info-box — content-element tag <info> */

/* ═══════════════════════════════════════════════════════════
   Info Box (.info-box)
   Left-accent inset callout for warnings, tips, confirmations.

   Themes:  (default = navy), accent, orange, green, neutral
   Attr:    label="…" → .info-label span at top
   ═══════════════════════════════════════════════════════════ */

article .info-box {
  border-left:   4px solid var(--info-accent, var(--color-primary));
  background:    var(--info-bg, var(--color-primary-50));
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:       1.125rem 1.5rem;
  margin:        1.5rem 0;
  font-size:     0.9375rem;
}

article .info-box p {
  line-height:   1.65;
  color:         var(--color-text-body);
  margin-bottom: 0;
}

article .info-box p:not(:last-child) { margin-bottom: 0.75em; }

/* ── Label ── */
article .info-label {
  display:        block;
  font-size:      0.6875rem;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--info-accent, var(--color-primary));
  margin-bottom:  0.5rem;
}

article .info-label::before {
  content:        '';
  display:        inline-block;
  width:          5px;
  height:         5px;
  border-radius:  50%;
  background:     currentColor;
  margin-right:   0.4em;
  vertical-align: 0.1em;
  opacity:        0.85;
}

/* ── Themes ── */
article .info-box--accent {
  --info-bg:     var(--color-accent-50);
  --info-accent: var(--color-accent);
}

article .info-box--orange {
  --info-bg:     var(--color-amber-50);
  --info-accent: var(--color-amber-500);
}

article .info-box--green {
  --info-bg:     var(--color-emerald-50);
  --info-accent: var(--color-emerald-600);
}

article .info-box--neutral {
  --info-bg:     var(--color-neutral-25);
  --info-accent: var(--color-neutral-400);
}