docs(storybook): expose semantic colors and gradients

src/foundation/foundation.css

@@ -30,3 +30,9 @@
 .hm-brand-color-chip { flex: 1 0 110px; min-width: 0; padding: 8px; border: 1px solid var(--hm-sem-stroke-default); }
 .hm-brand-color-chip[data-base] { border: 2px solid var(--hm-sem-fg-primary); font-weight: var(--hm-font-weight-bold); }
 .hm-brand-color-chip h3, .hm-brand-color-chip p { margin: 8px 0 0; font-size: 13px; }
+
+/* Color reference additions only; preserve the existing palette row and Default emphasis. */
+.hm-foundation .hm-color-gradient-preview { height: 112px; }
+.hm-foundation .hm-color-gradient-stops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+.hm-foundation .hm-color-gradient-stops .hm-brand-color-chip { flex: 1 1 110px; }
+.hm-foundation .hm-color-foreground-sample { padding: 16px; background: var(--hm-sem-bg-surface); }