/* CarbonWeb Design System — Typography Tokens
   Font: Raleway (Google Fonts). All styles letter-spacing: normal, text-align: left.
   Button text is the exception: text-align: center.
*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  --font-family: 'Raleway', sans-serif;
  --font-family-numeric: 'Montserrat', sans-serif;

  /* Font weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  /* Font sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --text-6xl: 40px;
  --text-7xl: 44px;
  --text-8xl: 48px;

  /* Line heights */
  --leading-tight: 1.3;    /* Display, Heading */
  --leading-normal: 1.5;   /* Paragraph, Button */
  --leading-relaxed: 1.7;  /* Body */
}

/* ── Display ── */
.display-1 {
  font-family: var(--font-family);
  font-weight: var(--font-black);
  font-size: var(--text-8xl);
  line-height: var(--leading-tight);
}
.display-2 {
  font-family: var(--font-family);
  font-weight: var(--font-light);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
}

/* ── Heading (Bold) ── */
.heading-1 { font-family: var(--font-family); font-weight: var(--font-bold); font-size: var(--text-7xl); line-height: var(--leading-tight); }
.heading-2 { font-family: var(--font-family); font-weight: var(--font-bold); font-size: var(--text-5xl); line-height: var(--leading-tight); }
.heading-3 { font-family: var(--font-family); font-weight: var(--font-bold); font-size: var(--text-4xl); line-height: var(--leading-tight); }
.heading-4 { font-family: var(--font-family); font-weight: var(--font-bold); font-size: var(--text-3xl); line-height: var(--leading-tight); }
.heading-5 { font-family: var(--font-family); font-weight: var(--font-bold); font-size: var(--text-xl);  line-height: var(--leading-tight); }
.heading-6 { font-family: var(--font-family); font-weight: var(--font-bold); font-size: var(--text-base); line-height: var(--leading-tight); }

/* ── Heading (SemiBold) ── */
.heading-2-sb { font-family: var(--font-family); font-weight: var(--font-semibold); font-size: var(--text-5xl); line-height: var(--leading-tight); }
.heading-3-sb { font-family: var(--font-family); font-weight: var(--font-semibold); font-size: var(--text-4xl); line-height: var(--leading-tight); }
.heading-4-sb { font-family: var(--font-family); font-weight: var(--font-semibold); font-size: var(--text-3xl); line-height: var(--leading-tight); }
.heading-5-sb { font-family: var(--font-family); font-weight: var(--font-semibold); font-size: var(--text-xl);  line-height: var(--leading-tight); }
.heading-6-sb { font-family: var(--font-family); font-weight: var(--font-semibold); font-size: var(--text-base); line-height: var(--leading-tight); }

/* ── Paragraph ── */
.lead-paragraph    { font-family: var(--font-family); font-weight: var(--font-regular);  font-size: var(--text-2xl); line-height: var(--leading-normal); }
.lead-paragraph-sb { font-family: var(--font-family); font-weight: var(--font-semibold); font-size: var(--text-2xl); line-height: var(--leading-normal); }

/* ── Body ── */
.body-large     { font-family: var(--font-family); font-weight: var(--font-regular);  font-size: var(--text-xl);   line-height: var(--leading-relaxed); }
.body-large-sb  { font-family: var(--font-family); font-weight: var(--font-semibold); font-size: var(--text-xl);   line-height: var(--leading-relaxed); }
.body-medium    { font-family: var(--font-family); font-weight: var(--font-regular);  font-size: var(--text-lg);   line-height: var(--leading-relaxed); }
.body-medium-sb { font-family: var(--font-family); font-weight: var(--font-semibold); font-size: var(--text-lg);   line-height: var(--leading-relaxed); }
.body-normal    { font-family: var(--font-family); font-weight: var(--font-regular);  font-size: var(--text-base); line-height: var(--leading-relaxed); }
.body-normal-md { font-family: var(--font-family); font-weight: var(--font-medium);   font-size: var(--text-base); line-height: var(--leading-relaxed); }
.body-small     { font-family: var(--font-family); font-weight: var(--font-regular);  font-size: var(--text-sm);   line-height: var(--leading-relaxed); }
.body-small-md  { font-family: var(--font-family); font-weight: var(--font-medium);   font-size: var(--text-sm);   line-height: var(--leading-relaxed); }

/* ── UI ── */
.text-button { font-family: var(--font-family); font-weight: var(--font-medium); font-size: var(--text-base); line-height: var(--leading-normal); text-align: center; }

/* ── Numeric (Montserrat) ── */
.text-numeric { font-family: var(--font-family-numeric); }
.text-numeric-lg { font-family: var(--font-family-numeric); font-weight: var(--font-bold); font-size: var(--text-8xl); line-height: var(--leading-tight); }
.text-numeric-md { font-family: var(--font-family-numeric); font-weight: var(--font-bold); font-size: var(--text-5xl); line-height: var(--leading-tight); }
.text-numeric-sm { font-family: var(--font-family-numeric); font-weight: var(--font-semibold); font-size: var(--text-3xl); line-height: var(--leading-tight); }