Replace company-card inline styles with semantic tokens and classes

styleguide.css

@@ -165,6 +165,9 @@
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
   --surface-object-card-lower-segment: var(--color-white);
+  --text-company-card-data-negative: var(--chart-value-negative);
+  --text-company-card-moat-neutral: var(--chart-value-neutral);
+  --layout-company-card-analysis-gap-after-moat: var(--spacing-large);
   --surface-navigation-card: var(--color-white);
   --surface-navigation-card-body: var(--color-white);
   --surface-content-block-card-title: var(--color-light-grey);
@@ -1807,6 +1810,30 @@ section + section {
   color: var(--color-font-light);
 }
 
+.sg-company-card__metric-negative {
+  color: var(--text-company-card-data-negative);
+}
+
+.sg-company-card__analysis-title {
+  margin: 0;
+}
+
+.sg-company-card__analysis-bars {
+  margin-top: 0;
+}
+
+.sg-company-card__moat {
+  margin: 0;
+}
+
+.sg-company-card__moat-neutral {
+  color: var(--text-company-card-moat-neutral);
+}
+
+.sg-company-card__summary {
+  margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0;
+}
+
 /* ========================================================= */
 /* Patterns: Navigation Card                                 */
 /* ========================================================= */