/* BMW M — Typography tokens.
   Weight-pair signature: heavy display (700) vs. light body (300).
   Display is UPPERCASE by default; body stays sentence-case.
   Substitute family: Inter (see fonts.css). */

:root {
  /* ---- Families ---- */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Weights ---- */
  --weight-light: 300;   /* body, secondary copy — the "engineered" voice */
  --weight-regular: 400; /* nav links, sub-titles */
  --weight-bold: 700;    /* display, button labels — the "stamped" voice */

  /* ---- Display scale (700, UPPERCASE, tracking tightened -0.5px) ---- */
  --display-xl: var(--weight-bold) 80px/1 var(--font-display);
  --display-lg: var(--weight-bold) 56px/1.05 var(--font-display);
  --display-md: var(--weight-bold) 40px/1.1 var(--font-display);
  --display-sm: var(--weight-bold) 32px/1.15 var(--font-display);
  --display-tracking: -0.5px;

  /* ---- Title scale ---- */
  --title-lg: var(--weight-bold) 24px/1.3 var(--font-display);
  --title-md: var(--weight-regular) 20px/1.4 var(--font-display);
  --title-sm: var(--weight-regular) 18px/1.4 var(--font-display);

  /* ---- Labels & body ---- */
  --label-uppercase: var(--weight-bold) 14px/1.3 var(--font-display);
  --label-tracking: 1.5px;

  --body-md: var(--weight-light) 16px/1.5 var(--font-body);
  --body-sm: var(--weight-light) 14px/1.5 var(--font-body);
  --caption: var(--weight-regular) 12px/1.4 var(--font-body);
  --caption-tracking: 0.5px;

  --button-font: var(--weight-bold) 14px/1 var(--font-display);
  --button-tracking: 1.5px;

  --nav-link: var(--weight-regular) 14px/1.4 var(--font-display);
  --nav-tracking: 0.5px;
}

/* ---- Optional helper classes (components can also read the vars directly) ---- */
.m-display-xl { font: var(--display-xl); letter-spacing: var(--display-tracking); text-transform: uppercase; color: var(--text-heading); }
.m-display-lg { font: var(--display-lg); letter-spacing: var(--display-tracking); text-transform: uppercase; color: var(--text-heading); }
.m-display-md { font: var(--display-md); letter-spacing: var(--display-tracking); text-transform: uppercase; color: var(--text-heading); }
.m-display-sm { font: var(--display-sm); letter-spacing: var(--display-tracking); text-transform: uppercase; color: var(--text-heading); }
.m-title-lg { font: var(--title-lg); color: var(--text-heading); }
.m-title-md { font: var(--title-md); color: var(--text-heading); }
.m-label { font: var(--label-uppercase); letter-spacing: var(--label-tracking); text-transform: uppercase; }
.m-body { font: var(--body-md); color: var(--text-body); }
.m-body-sm { font: var(--body-sm); color: var(--text-body); }
.m-caption { font: var(--caption); letter-spacing: var(--caption-tracking); color: var(--text-muted); }