/*
 * RAXE Design System — Badges & Tags
 * Severity, TLP, stream, status, trend, action, pill badges.
 * Depends on: tokens.css
 */

/* ── Base badge ── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono); font-size: 9px; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-sm);
  white-space: nowrap; line-height: 1.6;
  border: 1px solid transparent;
}

/* ── Severity badges ── */
.badge-critical { background: var(--sev-critical-bg); color: var(--sev-critical-text); border-color: var(--sev-critical-border); }
.badge-high     { background: var(--sev-high-bg);     color: var(--sev-high-text);     border-color: var(--sev-high-border);     }
.badge-medium   { background: var(--sev-medium-bg);   color: var(--sev-medium-text);   border-color: var(--sev-medium-border);   }
.badge-low      { background: var(--sev-low-bg);      color: var(--sev-low-text);      border-color: var(--sev-low-border);      }
.badge-info     { background: var(--sev-info-bg);     color: var(--sev-info-text);     border-color: var(--sev-info-border);     }

/* ── TLP classification badges ── */
.badge-tlp-white  { background: var(--tlp-white-bg);  color: var(--tlp-white-text); }
.badge-tlp-green  { background: var(--tlp-green-bg);  color: var(--tlp-green-text); }
.badge-tlp-amber  { background: var(--tlp-amber-bg);  color: var(--tlp-amber-text); }
.badge-tlp-red    { background: var(--tlp-red-bg);    color: var(--tlp-red-text);   }

/* ── TLP top bar (advisory / TI report) ── */
.tlp-band { height: 3px; width: 100%; display: block; }
.tlp-band-white { background: var(--tlp-white-bar); }
.tlp-band-green { background: var(--tlp-green-bar); }
.tlp-band-amber { background: var(--tlp-amber-bar); }
.tlp-band-red   { background: var(--tlp-red-bar);   }

/* ── Stream badges (S1–S4) ── */
.badge-stream-s1 { background: var(--stream-s1-bg); color: var(--stream-s1-text); }
.badge-stream-s2 { background: var(--stream-s2-bg); color: var(--stream-s2-text); }
.badge-stream-s3 { background: var(--stream-s3-bg); color: var(--stream-s3-text); }
.badge-stream-s4 { background: var(--stream-s4-bg); color: var(--stream-s4-text); }

/* ── Enforcement action badges (live panel) ── */
.badge-block    { background: var(--action-block-bg);    color: var(--action-block-text);    }
.badge-pass     { background: var(--action-pass-bg);     color: var(--action-pass-text);     }
.badge-action-critical {
  background: var(--action-critical-bg); color: var(--action-critical-text);
  border-color: var(--action-critical-border);
}

/* ── Status badges ── */
.badge-active     { background: rgba(0,229,192,0.10); color: #00e5c0; border-color: rgba(0,229,192,0.25); }
.badge-draft      { background: rgba(251,191,36,0.12); color: #fbbf24; }
.badge-final      { background: rgba(56,189,248,0.12); color: var(--cyan); }
.badge-restricted { background: var(--action-critical-bg); color: var(--amber); border-color: var(--border-amber); }
.badge-ga         { background: rgba(52,211,153,0.12); color: #34d399; }

/* ── CVSS score badge ── */
.badge-cvss {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold);
  padding: 3px 10px; border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
}
.badge-cvss-critical { background: var(--sev-critical-bg); color: var(--sev-critical-text); border-color: var(--sev-critical-border); border: 1px solid; }
.badge-cvss-high     { background: var(--sev-high-bg);     color: var(--sev-high-text);     border-color: var(--sev-high-border);     border: 1px solid; }
.badge-cvss-medium   { background: var(--sev-medium-bg);   color: var(--sev-medium-text);   border-color: var(--sev-medium-border);   border: 1px solid; }

/* ── Trend badges (MoM) ── */
.badge-trend-up     { background: var(--trend-up-bg);     color: var(--trend-up-text);     }
.badge-trend-down   { background: var(--trend-down-bg);   color: var(--trend-down-text);   }
.badge-trend-stable { background: var(--trend-stable-bg); color: var(--trend-stable-text); }

/* ── Pill badge (rounded, for eyebrow labels) ── */
.badge-pill {
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  padding: 4px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(56,189,248,0.22);
  background: rgba(56,189,248,0.07);
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.badge-pill-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--cyan);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

/* ── Amber ops badge (nav / hero) ── */
.badge-ops {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--amber);
  border: 1px solid var(--border-amber); background: rgba(245,158,11,0.07);
  padding: 4px 12px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.badge-ops-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 6px var(--amber);
  animation: badge-pulse 2s ease-in-out infinite;
}