/* ============================================================
   Bosch Web Design System — Typography Tokens
   Typeface: Bosch Sans. Scale & line-heights from BDDS variables.
   ============================================================ */

:root {
  --bds-font-family: "boschsans", "Arial", system-ui, sans-serif;

  /* Weights (Bosch Sans ships Light/Regular/Medium/Bold/Black) */
  --bds-weight-light: 300;
  --bds-weight-regular: 400;
  --bds-weight-medium: 500;
  --bds-weight-bold: 700;
  --bds-weight-black: 900;

  /* Type scale (px) — BDDS font/size tokens */
  --bds-size-s: 12px;    /* caption / legal */
  --bds-size-sm: 14px;
  --bds-size-m: 16px;    /* body default */
  --bds-size-l: 20px;    /* lead / large body */
  --bds-size-xl: 24px;   /* h5 */
  --bds-size-2xl: 32px;  /* h4 */
  --bds-size-3xl: 40px;  /* h3 */
  --bds-size-4xl: 48px;  /* h2 */
  --bds-size-5xl: 64px;  /* h1 */
  --bds-size-6xl: 80px;  /* display */

  /* Line heights (px) — BDDS font/line-height tokens */
  --bds-lh-s: 18px;
  --bds-lh-sm: 20px;
  --bds-lh-m: 24px;
  --bds-lh-l: 28px;
  --bds-lh-xl: 34px;
  --bds-lh-2xl: 43px;
  --bds-lh-3xl: 52px;
  --bds-lh-4xl: 58px;
  --bds-lh-5xl: 77px;
  --bds-lh-6xl: 96px;

  --bds-letter-tight: -0.01em;
  --bds-letter-normal: 0;
}

/* ---- Reusable text-style classes ---------------------------- */
.bds-display { font: var(--bds-weight-bold) var(--bds-size-6xl)/var(--bds-lh-6xl) var(--bds-font-family); letter-spacing: var(--bds-letter-tight); }
.bds-h1 { font: var(--bds-weight-bold) var(--bds-size-5xl)/var(--bds-lh-5xl) var(--bds-font-family); letter-spacing: var(--bds-letter-tight); }
.bds-h2 { font: var(--bds-weight-bold) var(--bds-size-4xl)/var(--bds-lh-4xl) var(--bds-font-family); }
.bds-h3 { font: var(--bds-weight-bold) var(--bds-size-3xl)/var(--bds-lh-3xl) var(--bds-font-family); }
.bds-h4 { font: var(--bds-weight-bold) var(--bds-size-2xl)/var(--bds-lh-2xl) var(--bds-font-family); }
.bds-h5 { font: var(--bds-weight-bold) var(--bds-size-xl)/var(--bds-lh-xl) var(--bds-font-family); }
.bds-h6 { font: var(--bds-weight-bold) var(--bds-size-l)/var(--bds-lh-l) var(--bds-font-family); }
.bds-lead { font: var(--bds-weight-regular) var(--bds-size-l)/var(--bds-lh-l) var(--bds-font-family); }
.bds-body { font: var(--bds-weight-regular) var(--bds-size-m)/var(--bds-lh-m) var(--bds-font-family); }
.bds-body-bold { font: var(--bds-weight-bold) var(--bds-size-m)/var(--bds-lh-m) var(--bds-font-family); }
.bds-small { font: var(--bds-weight-regular) var(--bds-size-sm)/var(--bds-lh-sm) var(--bds-font-family); }
.bds-caption { font: var(--bds-weight-regular) var(--bds-size-s)/var(--bds-lh-s) var(--bds-font-family); }