phase-4: scss upgrade

ui/src/styles/_badges.scss

@@ -0,0 +1,67 @@
+@use 'sass:map';
+
+// ── Shared pill base ─────────────────────────────────────────────────────
+%pill-base {
+  display: inline-block;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+}
+
+// ── Verdict pill ─────────────────────────────────────────────────────────
+// Unified: replaces both .verdict-pill (screener) and .vpill (safe-buys)
+
+$verdict-variants: (
+  'green':  (color: var(--green),  bg: var(--green-bg)),
+  'yellow': (color: var(--yellow), bg: var(--yellow-bg)),
+  'red':    (color: var(--red),    bg: var(--red-bg)),
+);
+
+.verdict-pill {
+  @extend %pill-base;
+  font-size: var(--fs-sm);
+  letter-spacing: 0.02em;
+
+  @each $name, $vals in $verdict-variants {
+    &.#{$name} {
+      background: map.get($vals, 'bg');
+      color: map.get($vals, 'color');
+    }
+  }
+}
+
+// ── Sentiment pill (LLM sidebar — BULLISH / BEARISH / NEUTRAL) ───────────
+
+$sentiment-variants: (
+  BULLISH: (color: var(--green),      bg: var(--green-bg)),
+  BEARISH: (color: var(--red),        bg: var(--red-bg)),
+  NEUTRAL: (color: var(--text-muted), bg: var(--bg-card)),
+);
+
+.sentiment-pill {
+  @extend %pill-base;
+  font-size: var(--fs-xs);
+
+  @each $sentiment, $vals in $sentiment-variants {
+    &[data-sentiment='#{$sentiment}'] {
+      background: map.get($vals, 'bg');
+      color: map.get($vals, 'color');
+    }
+  }
+}
+
+// ── Text colour helpers ───────────────────────────────────────────────────
+
+$text-colors: (
+  'green':  var(--green),
+  'yellow': var(--yellow),
+  'red':    var(--red),
+  'orange': var(--orange),
+);
+
+@each $name, $color in $text-colors {
+  .text-#{$name} { color: $color; font-weight: 600; }
+}
+
+.text-gray { color: var(--text-dim); }