/* ============================================================
   QMAS — Typography Tokens
   Family: Roboto (per QMAS spec). Type ramp matches the QMAS
   Figma Text Styles. fontSize + lineHeight + weight always
   travel together — reference the --text-* aliases.
   ============================================================ */

:root {
  /* Family */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Helvetica Neue', Arial, sans-serif;
  --font-family-code: 'Roboto Mono', 'SFMono-Regular', Consolas,
    'Liberation Mono', Menlo, monospace;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;   /* used for nav, table headers */
  --font-weight-strong: 600;   /* headings, emphasis */

  /* ---- Size ramp (px) ---- */
  --font-size-xxs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;   /* BODY DEFAULT */
  --font-size-lg: 16px;
  --font-size-xl: 20px;     /* Huge */
  --font-size-h1: 38px;
  --font-size-h2: 30px;
  --font-size-h3: 24px;
  --font-size-h4: 20px;
  --font-size-h5: 16px;

  /* ---- Line heights (px, paired to sizes above) ---- */
  --line-height-xxs: 15px;
  --line-height-xs: 18px;
  --line-height-sm: 20px;
  --line-height-base: 22px;
  --line-height-lg: 24px;
  --line-height-xl: 28px;
  --line-height-h1: 46px;
  --line-height-h2: 38px;
  --line-height-h3: 32px;
  --line-height-h4: 28px;
  --line-height-h5: 24px;

  /* ============================================================
     SEMANTIC TEXT STYLES — shorthand custom props.
     Apply with: font: var(--text-base); (then set color separately)
     ============================================================ */
  --text-xxsmall:  400 var(--font-size-xxs)/var(--line-height-xxs) var(--font-family);
  --text-xsmall:   400 var(--font-size-xs)/var(--line-height-xs) var(--font-family);
  --text-small:    400 var(--font-size-sm)/var(--line-height-sm) var(--font-family);
  --text-small-strong: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-family);  /* table column headers */
  --text-base:     400 var(--font-size-base)/var(--line-height-base) var(--font-family);
  --text-base-strong: 600 var(--font-size-base)/var(--line-height-base) var(--font-family);
  --text-large:    400 var(--font-size-lg)/var(--line-height-lg) var(--font-family);
  --text-huge:     400 var(--font-size-xl)/var(--line-height-xl) var(--font-family);
  --text-h1: 600 var(--font-size-h1)/var(--line-height-h1) var(--font-family);
  --text-h2: 600 var(--font-size-h2)/var(--line-height-h2) var(--font-family);
  --text-h3: 600 var(--font-size-h3)/var(--line-height-h3) var(--font-family);
  --text-h4: 600 var(--font-size-h4)/var(--line-height-h4) var(--font-family);
  --text-h5: 600 var(--font-size-h5)/var(--line-height-h5) var(--font-family);
}