/**
 * Driverguards - Typography Classes & Utilities
 * Automatically scales or provides explicit Desktop & Mobile classes
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

/* Clean Text Reset: Zero margin & zero padding on all typography classes (Strict Flexbox/Grid Gap Spacing) */
h1, h2, h3, h4, h5, h6, p, span, a, label,
.dg-title-1, .dg-title-2, .dg-title-3, .dg-title-4,
.dg-heading-1, .dg-heading-2,
.dg-subheading-1, .dg-subheading-2,
.dg-body-1, .dg-body-2, .dg-body-2-semibold, .dg-body-3, .dg-body-3-semibold {
  margin: 0;
  padding: 0;
}

/* --- DISPLAY / TITLE STYLES (Bebas Neue) --- */
.dg-title-1 {
  font-family: var(--dg-text-desktop-title1-family);
  font-weight: var(--dg-text-desktop-title1-weight);
  font-size: var(--dg-text-desktop-title1-size);
  line-height: var(--dg-text-desktop-title1-lh);
  letter-spacing: var(--dg-text-desktop-title1-ls);
  text-transform: uppercase;
}

.dg-title-2 {
  font-family: var(--dg-text-desktop-title2-family);
  font-weight: var(--dg-text-desktop-title2-weight);
  font-size: var(--dg-text-desktop-title2-size);
  line-height: var(--dg-text-desktop-title2-lh);
  letter-spacing: var(--dg-text-desktop-title2-ls);
  text-transform: uppercase;
}

.dg-title-3 {
  font-family: var(--dg-text-desktop-title3-family);
  font-weight: var(--dg-text-desktop-title3-weight);
  font-size: var(--dg-text-desktop-title3-size);
  line-height: var(--dg-text-desktop-title3-lh);
  letter-spacing: var(--dg-text-desktop-title3-ls);
  text-transform: uppercase;
}

.dg-title-4 {
  font-family: var(--dg-text-desktop-title4-family);
  font-weight: var(--dg-text-desktop-title4-weight);
  font-size: var(--dg-text-desktop-title4-size);
  line-height: var(--dg-text-desktop-title4-lh);
  letter-spacing: var(--dg-text-desktop-title4-ls);
  text-transform: uppercase;
}

/* --- HEADING STYLES (Inter SemiBold) --- */
.dg-heading-1 {
  font-family: var(--dg-text-desktop-h1-family);
  font-weight: var(--dg-text-desktop-h1-weight);
  font-size: var(--dg-text-desktop-h1-size);
  line-height: var(--dg-text-desktop-h1-lh);
  letter-spacing: var(--dg-text-desktop-h1-ls);
}

.dg-heading-2 {
  font-family: var(--dg-text-desktop-h2-family);
  font-weight: var(--dg-text-desktop-h2-weight);
  font-size: var(--dg-text-desktop-h2-size);
  line-height: var(--dg-text-desktop-h2-lh);
  letter-spacing: var(--dg-text-desktop-h2-ls);
}

/* --- SUB HEADING STYLES (Inter SemiBold Uppercase +4% Tracking) --- */
.dg-subheading-1 {
  font-family: var(--dg-text-desktop-sh1-family);
  font-weight: var(--dg-text-desktop-sh1-weight);
  font-size: var(--dg-text-desktop-sh1-size);
  line-height: var(--dg-text-desktop-sh1-lh);
  letter-spacing: var(--dg-text-desktop-sh1-ls);
  text-transform: uppercase;
}

.dg-subheading-2 {
  font-family: var(--dg-text-desktop-sh2-family);
  font-weight: var(--dg-text-desktop-sh2-weight);
  font-size: var(--dg-text-desktop-sh2-size);
  line-height: var(--dg-text-desktop-sh2-lh);
  letter-spacing: var(--dg-text-desktop-sh2-ls);
  text-transform: uppercase;
}

/* --- BODY STYLES (Inter Regular & SemiBold) --- */
.dg-body-1 {
  font-family: var(--dg-text-desktop-b1-regular-family);
  font-weight: var(--dg-text-desktop-b1-regular-weight);
  font-size: var(--dg-text-desktop-b1-regular-size);
  line-height: var(--dg-text-desktop-b1-regular-lh);
  letter-spacing: var(--dg-text-desktop-b1-regular-ls);
}

.dg-body-2-semibold {
  font-family: var(--dg-text-desktop-b2-semibold-family);
  font-weight: var(--dg-text-desktop-b2-semibold-weight);
  font-size: var(--dg-text-desktop-b2-semibold-size);
  line-height: var(--dg-text-desktop-b2-semibold-lh);
  letter-spacing: var(--dg-text-desktop-b2-semibold-ls);
}

.dg-body-2 {
  font-family: var(--dg-text-desktop-b2-regular-family);
  font-weight: var(--dg-text-desktop-b2-regular-weight);
  font-size: var(--dg-text-desktop-b2-regular-size);
  line-height: var(--dg-text-desktop-b2-regular-lh);
  letter-spacing: var(--dg-text-desktop-b2-regular-ls);
}

.dg-body-3-semibold {
  font-family: var(--dg-text-desktop-b3-semibold-family);
  font-weight: var(--dg-text-desktop-b3-semibold-weight);
  font-size: var(--dg-text-desktop-b3-semibold-size);
  line-height: var(--dg-text-desktop-b3-semibold-lh);
  letter-spacing: var(--dg-text-desktop-b3-semibold-ls);
}

.dg-body-3 {
  font-family: var(--dg-text-desktop-b3-regular-family);
  font-weight: var(--dg-text-desktop-b3-regular-weight);
  font-size: var(--dg-text-desktop-b3-regular-size);
  line-height: var(--dg-text-desktop-b3-regular-lh);
  letter-spacing: var(--dg-text-desktop-b3-regular-ls);
}

/* --- LINK & BUTTON TYPOGRAPHY (Bebas Neue) --- */
.dg-nav-link-text {
  font-family: var(--dg-text-desktop-navlink-family);
  font-weight: var(--dg-text-desktop-navlink-weight);
  font-size: var(--dg-text-desktop-navlink-size);
  line-height: var(--dg-text-desktop-navlink-lh);
  letter-spacing: var(--dg-text-desktop-navlink-ls);
  text-transform: uppercase;
}

.dg-btn-text-1 {
  font-family: var(--dg-text-desktop-btn1-family);
  font-weight: var(--dg-text-desktop-btn1-weight);
  font-size: var(--dg-text-desktop-btn1-size);
  line-height: var(--dg-text-desktop-btn1-lh);
  letter-spacing: var(--dg-text-desktop-btn1-ls);
  text-transform: uppercase;
}

.dg-btn-text-2 {
  font-family: var(--dg-text-desktop-btn2-family);
  font-weight: var(--dg-text-desktop-btn2-weight);
  font-size: var(--dg-text-desktop-btn2-size);
  line-height: var(--dg-text-desktop-btn2-lh);
  letter-spacing: var(--dg-text-desktop-btn2-ls);
  text-transform: uppercase;
}

/* ==========================================================================
   RESPONSIVE AUTO-ADAPTATION (Mobile & Tablet Viewport <= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .dg-title-1 {
    font-size: var(--dg-text-mobile-title1-size);
    line-height: var(--dg-text-mobile-title1-lh);
    letter-spacing: var(--dg-text-mobile-title1-ls);
  }

  .dg-title-2 {
    font-size: var(--dg-text-mobile-title2-size);
    line-height: var(--dg-text-mobile-title2-lh);
    letter-spacing: var(--dg-text-mobile-title2-ls);
  }

  .dg-title-3 {
    font-size: var(--dg-text-mobile-title3-size);
    line-height: var(--dg-text-mobile-title3-lh);
    letter-spacing: var(--dg-text-mobile-title3-ls);
  }

  .dg-title-4 {
    font-size: var(--dg-text-mobile-title3-size); /* 40px */
    line-height: var(--dg-text-mobile-title3-lh);
  }

  .dg-heading-1 {
    font-size: var(--dg-text-mobile-h1-size);
    line-height: var(--dg-text-mobile-h1-lh);
  }

  .dg-heading-2 {
    font-size: var(--dg-text-mobile-h2-size);
    line-height: var(--dg-text-mobile-h2-lh);
  }

  .dg-subheading-1 {
    font-size: var(--dg-text-mobile-sh1-size);
    line-height: var(--dg-text-mobile-sh1-lh);
  }

  .dg-subheading-2 {
    font-size: var(--dg-text-mobile-sh2-size);
    line-height: var(--dg-text-mobile-sh2-lh);
  }

  .dg-body-1 {
    font-size: var(--dg-text-mobile-b1-regular-size);
    line-height: var(--dg-text-mobile-b1-regular-lh);
  }
}