/* ==========================================================================
   Vision — Typography
   Families, weights, and the full type scale from the Figma "Typography Scale".
   Base UI size is small (13-14px): this is a dense, information-rich enterprise
   product. Utility classes let cards + kits apply steps without re-declaring.
   ========================================================================== */
:root {
  --vds-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vds-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --vds-weight-regular:  400;
  --vds-weight-medium:   500;
  --vds-weight-semibold: 600;
  --vds-weight-bold:     700;
  --vds-weight-extrabold:800;
}

/* ---- Type scale (font-size / line-height / weight) ---------------------- */
.vds-h1        { font: var(--vds-weight-bold) 24px/32px var(--vds-font-sans); letter-spacing: -0.02em; color: var(--vds-text-primary); }
.vds-h2        { font: var(--vds-weight-bold) 20px/28px var(--vds-font-sans); letter-spacing: -0.01em; color: var(--vds-text-primary); }
.vds-h3        { font: var(--vds-weight-semibold) 18px/24px var(--vds-font-sans); color: var(--vds-text-primary); }
.vds-h4        { font: var(--vds-weight-semibold) 16px/22px var(--vds-font-sans); color: var(--vds-text-primary); }
.vds-body-lg   { font: var(--vds-weight-regular) 16px/24px var(--vds-font-sans); color: var(--vds-text-primary); }
.vds-body      { font: var(--vds-weight-regular) 14px/20px var(--vds-font-sans); color: var(--vds-text-primary); }
.vds-body-med  { font: var(--vds-weight-medium) 14px/20px var(--vds-font-sans); color: var(--vds-text-primary); }
.vds-body-sb   { font: var(--vds-weight-semibold) 14px/20px var(--vds-font-sans); color: var(--vds-text-primary); }
.vds-sm        { font: var(--vds-weight-regular) 13px/18px var(--vds-font-sans); color: var(--vds-text-primary); }
.vds-sm-sb     { font: var(--vds-weight-semibold) 13px/18px var(--vds-font-sans); color: var(--vds-text-primary); }
.vds-caption   { font: var(--vds-weight-regular) 12px/16px var(--vds-font-sans); color: var(--vds-text-secondary); }
.vds-caption-sb{ font: var(--vds-weight-semibold) 12px/16px var(--vds-font-sans); color: var(--vds-text-primary); }
.vds-caption-xs{ font: var(--vds-weight-regular) 11px/14px var(--vds-font-sans); color: var(--vds-text-secondary); }
.vds-overline  { font: var(--vds-weight-semibold) 10px/14px var(--vds-font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vds-text-tertiary); }
.vds-mono      { font: var(--vds-weight-semibold) 13px/18px var(--vds-font-mono); color: var(--vds-text-secondary); }