/* ActiveProspect — typography foundations.
   Type scale transcribed verbatim from the Figma "Typography" spec.
   Font-size / font-weight primitives live in fig-tokens.css (unitless floats). */

:root {
  /* Font families. --font-sans is the brand UI face (Proxima Nova → Mulish substitute). */
  --font-sans: 'Mulish', 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Semantic type steps: size / line-height (px, from spec). */
  --type-display-size: 48px;      --type-display-line: 62px;
  --type-heading-lg-size: 30px;   --type-heading-lg-line: 38px;
  --type-heading-md-size: 24px;   --type-heading-md-line: 32px;
  --type-heading-sm-size: 20px;   --type-heading-sm-line: 28px;
  --type-heading-xs-size: 14px;   --type-heading-xs-line: 20px;
  --type-body-size: 14px;         --type-body-line: 20px;
  --type-caption-size: 12px;      --type-caption-line: 16px;

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

/* Type specimen / utility classes. Sentence case everywhere except buttons (Title Case). */
.ds-display        { font-family: var(--font-sans); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: 600; color: var(--text-primary-color); }
.ds-display-light  { font-family: var(--font-sans); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: 400; color: var(--text-primary-color); }
.ds-heading-lg     { font-family: var(--font-sans); font-size: var(--type-heading-lg-size); line-height: var(--type-heading-lg-line); font-weight: 600; color: var(--text-primary-color); }
.ds-heading-md     { font-family: var(--font-sans); font-size: var(--type-heading-md-size); line-height: var(--type-heading-md-line); font-weight: 600; color: var(--text-primary-color); }
.ds-heading-sm     { font-family: var(--font-sans); font-size: var(--type-heading-sm-size); line-height: var(--type-heading-sm-line); font-weight: 600; color: var(--text-primary-color); }
.ds-heading-xs     { font-family: var(--font-sans); font-size: var(--type-heading-xs-size); line-height: var(--type-heading-xs-line); font-weight: 700; color: var(--text-primary-color); }
.ds-body-semibold  { font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: 600; color: var(--text-primary-color); }
.ds-body           { font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: 400; color: var(--text-primary-color); }
.ds-caption-semibold { font-family: var(--font-sans); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 600; color: var(--text-primary-color); }
.ds-caption        { font-family: var(--font-sans); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 400; color: var(--text-secondary-color); }
.ds-mono           { font-family: var(--font-mono); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: 400; }