:root {

  /* Font */
  --font-main: "Manrope", sans-serif;

  /* Display */
  --display-xl: clamp(72px, 10vw, 119px);
  --display-lg: clamp(56px, 8vw, 96px);

  /* Headings */
  --h1: clamp(48px, 6vw, 80px);
  --h2: clamp(36px, 5vw, 56px);
  --h3: clamp(24px, 3vw, 36px);
  --h4: clamp(20px, 2vw, 28px);

  /* Body */
  --body-lg: 20px;
  --body: 16px;
  --body-sm: 14px;

  /* Labels */
  --eyebrow: 14px;
  --label: 12px;

  /* Font Weight */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}


/* ========================================
   TYPOGRAPHY CLASSES
======================================== */

.display-xl {
  font-family: var(--font-main);
  font-size: var(--display-xl);
  font-weight: var(--weight-bold);
  line-height: 0.9;
}

.display-lg {
  font-family: var(--font-main);
  font-size: var(--display-lg);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.heading-h1 {
  font-family: var(--font-main);
  font-size: var(--h1);
  font-weight: var(--weight-bold);
  line-height: 1.05;
}

.heading-h2 {
  font-family: var(--font-main);
  font-size: var(--h2);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
}

.heading-h3 {
  font-family: var(--font-main);
  font-size: var(--h3);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}

.heading-h4 {
  font-family: var(--font-main);
  font-size: var(--h4);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.body-lg {
  font-family: var(--font-main);
  font-size: var(--body-lg);
  font-weight: var(--weight-medium);
  line-height: 1.6;
}

.body-text {
  font-family: var(--font-main);
  font-size: var(--body);
  font-weight: var(--weight-medium);
  line-height: 1.7;
}

.body-small {
  font-family: var(--font-main);
  font-size: var(--body-sm);
  font-weight: var(--weight-medium);
  line-height: 1.6;
}

.eyebrow {
  font-family: var(--font-main);
  font-size: var(--eyebrow);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.label {
  font-family: var(--font-main);
  font-size: var(--label);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}