/* ─────────────────────────────────────────────────────────────
   CloudSuite — Typography tokens
   Scale transcribed from Figma "Typography Desktop" style-guide frame.
   Headings: Montserrat · Body: Open Sans · UI/buttons: Roboto
   ───────────────────────────────────────────────────────────── */

:root {
  /* Families */
  --cs-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --cs-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --cs-font-ui: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Weights */
  --cs-weight-light: 300;
  --cs-weight-regular: 400;
  --cs-weight-medium: 500;
  --cs-weight-semibold: 600;
  --cs-weight-bold: 700;

  /* Display / heading scale (Montserrat). line-heights are unitless ratios. */
  --cs-h1-size: 40px;   --cs-h1-weight: 300; --cs-h1-lh: 1.2; /* @kind other */
  --cs-h2-size: 30px;   --cs-h2-weight: 300; --cs-h2-lh: 1.2; /* @kind other */
  --cs-h3-size: 22px;   --cs-h3-weight: 300; --cs-h3-lh: 1.2; /* @kind other */
  --cs-h3sb-size: 20px; --cs-h3sb-weight: 600; --cs-h3sb-lh: 1.2; /* @kind other */
  --cs-h4-size: 18px;   --cs-h4-weight: 600; --cs-h4-lh: 1.2; /* @kind other */

  /* Body scale (Open Sans) */
  --cs-intro-size: 20px;   --cs-intro-lh: 1.6; /* @kind other */
  --cs-body-size: 16px;    --cs-body-lh: 1.5; /* @kind other */
  --cs-body-sm-size: 14px; --cs-body-sm-lh: 1.5; /* @kind other */

  /* Captions (Open Sans) */
  --cs-caption-size: 10px;  --cs-caption-lh: 1.2; /* @kind other */ --cs-caption-ls: 3px; /* uppercase semibold */
  --cs-caption1-size: 14px; --cs-caption1-lh: 1.2; /* @kind other */
  --cs-caption2-size: 12px; --cs-caption2-lh: 1.2; /* @kind other */
  --cs-caption3-size: 10px; --cs-caption3-lh: 1.2; /* @kind other */

  /* UI / button (Roboto) */
  --cs-button-size: 16px; --cs-button-lh: 22px;
  --cs-button-sm-size: 14px; --cs-button-sm-lh: 20px;
}

/* Convenience utility classes (optional) */
.cs-h1 { font-family: var(--cs-font-heading); font-weight: var(--cs-h1-weight); font-size: var(--cs-h1-size); line-height: var(--cs-h1-lh); color: var(--cs-text-heading); margin: 0; }
.cs-h2 { font-family: var(--cs-font-heading); font-weight: var(--cs-h2-weight); font-size: var(--cs-h2-size); line-height: var(--cs-h2-lh); color: var(--cs-text-heading); margin: 0; }
.cs-h3 { font-family: var(--cs-font-heading); font-weight: var(--cs-h3-weight); font-size: var(--cs-h3-size); line-height: var(--cs-h3-lh); color: var(--cs-text-heading); margin: 0; }
.cs-h4 { font-family: var(--cs-font-heading); font-weight: var(--cs-h4-weight); font-size: var(--cs-h4-size); line-height: var(--cs-h4-lh); color: var(--cs-text-heading); margin: 0; }
.cs-intro { font-family: var(--cs-font-body); font-weight: 300; font-size: var(--cs-intro-size); line-height: var(--cs-intro-lh); color: var(--cs-text-body); margin: 0; }
.cs-body { font-family: var(--cs-font-body); font-weight: 400; font-size: var(--cs-body-size); line-height: var(--cs-body-lh); color: var(--cs-text-body); margin: 0; }
.cs-body-sm { font-family: var(--cs-font-body); font-weight: 400; font-size: var(--cs-body-sm-size); line-height: var(--cs-body-sm-lh); color: var(--cs-text-body); margin: 0; }
.cs-caption { font-family: var(--cs-font-body); font-weight: 600; font-size: var(--cs-caption-size); line-height: var(--cs-caption-lh); letter-spacing: var(--cs-caption-ls); text-transform: uppercase; color: var(--cs-text-muted); margin: 0; }