/* ============================================
   TYPOGRAPHY SYSTEM - 2026
   Based on Figma Design Tokens
   ============================================ */
/* Imported NeueMontreal fonts 4/19/2023 */
@font-face {
  font-family: "NeueMontreal-Bold";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-Bold.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-Bold.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-BoldItalic";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-BoldItalic.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-BoldItalic.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-Book";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-Book.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-Book.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-BookItalic";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-BookItalic.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-BookItalic.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-Italic";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-Italic.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-Italic.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-Light";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-Light.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-Light.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-LightItalic";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-LightItalic.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-LightItalic.ttf)
      format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-Medium";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-Medium.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-Medium.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-MediumItalic";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-MediumItalic.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-MediumItalic.ttf)
      format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-Regular";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-Regular.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-SemiBold";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-SemiBold.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-SemiBold.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-SemiBoldItalic";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-SemiBoldItalic.woff)
      format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-SemiBoldItalic.ttf)
      format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-Thin";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-Thin.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-Thin.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontreal-ThinItalic";
  src:
    url(../fonts/neue-montreal/PPNeueMontreal-ThinItalic.woff) format("woff"),
    url(../fonts/neue-montreal/PPNeueMontreal-ThinItalic.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* ============================================
   COLOR OVERRIDE
   ============================================ */
.hs-b5,
.hs-b5 * {
  color: #2f2d2d;
}

.hs-b5 a {
  color: #2f2d2d;
  text-decoration: none;
}

.hs-b5 a:hover {
  color: #2f2d2d;
}

.hs-b5 .grey-3 {
  color: #737373;
}

/* ============================================
   BASE FIGMA TOKENS
   ============================================ */

/* H1: 50px/105%/-1px */
.hs-b5 .h1 {
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 105%;
  letter-spacing: -1px;
}

/* H2: 36px/120%/-0.36px */
.hs-b5 .h2 {
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.36px;
}

/* H3: 24px/120% */
.hs-b5 .h3 {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

/* Large Body: 18px/130% */
.hs-b5 .l-body {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

/* Medium Body: 16px/120% */
.hs-b5 .m-body {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

/* Small Body: 14px/130% */
.hs-b5 .s-body {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

/* Small Links: 14px/500/130% */
.hs-b5 .s-links,
.hs-b5 .s-promo {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

/* Extra Small Links: 12px/130% */
.hs-b5 .xs-links {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

/* Extra Small Body: 12px/130% */
.hs-b5 .xs-body {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

/* Double Extra Small Body: 10px/130% */
.hs-b5 .xxs-body {
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

/* Double Extra Small Links: 10px/500/130% */
.hs-b5 .xxs-links {
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

/* ============================================
   VARIANT CLASSES (Special Cases)
   ============================================ */

/* H2 Tight: 36px/115%/-0.54px (Dual Content Headers) */
.hs-b5 .h2-tight {
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 115%;
  letter-spacing: -0.54px;
}

/* L-Body LS: 18px/130%/-0.18px (Hero Subtitle) */
.hs-b5 .l-body-ls {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.18px;
}

/* S-Nav: 14px/normal (Nav Title) */
.hs-b5 .s-nav {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* S-Nav Stays: 14px/normal (Utility Nav - 11px on Mobile) */
.hs-b5 .s-nav-stays {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* S-Body Desktop: 14px/130% (Nav SubItem - desktop only) */
.hs-b5 .s-body-desktop {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

/* M-Body Mobile: 16px/normal (Nav Footer - mobile only) */
.hs-b5 .m-body-mobile {
  display: none;
}

.hs-b5 .quote-stays {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

/* BUTTONS DESKTOP */
.hs-b5 .primary-btn-dark,
.primary-btn-dark {
  color: #fafafa !important;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  border-radius: 40px;
  background: var(--gray-6-main, #2f2d2d);
  border: none;
  padding: 8px 18px;
}

.hs-b5 .secondary-btn-gray,
.secondary-btn-gray {
  color: var(--gray-6-main, #2f2d2d);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  border-radius: 40px;
  background: var(--New-Default-Gray, #efefef);
  border: none;
  padding: 8px 18px;
}

.hs-b5 .primary-btn-white,
.primary-btn-white {
  color: var(--gray-6-main, #2f2d2d);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  border-radius: 40px;
  background: var(--White, #fff);
  border: none;
  padding: 8px 18px;
}

.hs-b5 .primary-btn-dark:hover,
.primary-btn-dark:hover {
  background: var(--Gray-5, #6e6e6e);
  text-decoration: none;
}

.hs-b5 .secondary-btn-gray:hover,
.secondary-btn-gray:hover {
  background: var(--Gray-3, #d2d1cf);
  text-decoration: none;
}

.hs-b5 .primary-btn-white:hover,
.primary-btn-white:hover {
  background: var(--Gray-3, #d2d1cf);
  text-decoration: none;
}

/* ============================================
   MOBILE OVERRIDES
   ============================================ */

@media (max-width: 768px) {
  /* Buttons */
  .hs-b5 .primary-btn-dark,
  .primary-btn-dark {
    padding: 5px 18px;
  }

  .hs-b5 .secondary-btn-gray,
  .secondary-btn-gray {
    padding: 5px 18px;
  }

  .hs-b5 .primary-btn-white,
  .primary-btn-white {
    padding: 5px 18px;
  }
}

@media (max-width: 992px) {
  /* H1 → H2 */
  .hs-b5 .h1 {
    font-size: 36px;
    line-height: 120%;
    letter-spacing: -0.36px;
  }

  /* H2 → H3 */
  .hs-b5 .h2 {
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0;
  }

  /* H2 Tight → H3 */
  .hs-b5 .h2-tight {
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0;
  }

  /* H3 → L-Body */
  .hs-b5 .h3 {
    font-size: 18px;
    line-height: 130%;
  }

  /* L-Body LS loses letter-spacing */
  .hs-b5 .l-body-ls {
    letter-spacing: 0;
  }

  /* M-Body → S-Body */
  .hs-b5 .m-body {
    font-size: 14px;
    line-height: 130%;
  }

  /* S-Body → XS-Body */
  .hs-b5 .s-body {
    font-size: 12px;
  }

  /* S-Links → M-Body with normal line-height */
  .hs-b5 .s-links {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
  }

  .hs-b5 .s-promo {
    font-size: 14px;
  }

  /* S-Nav → H3 */
  .hs-b5 .s-nav {
    font-size: 24px;
    line-height: 120%;
  }

  .hs-b5 .s-nav-stays {
    font-size: 12px;
  }

  /* S-Body Desktop → Hidden */
  .hs-b5 .s-body-desktop {
    display: none;
  }

  /* XS-Links → S-Body */
  .hs-b5 .xs-links {
    font-size: 14px;
  }

  /* XS-Body → XXS-Body */
  .hs-b5 .xs-body {
    font-size: 10px;
  }

  /* XXS-Links → XS-Body */
  .hs-b5 .xxs-links {
    font-size: 12px;
    font-weight: 400;
  }

  /* M-Body Mobile → Show */
  .hs-b5 .m-body-mobile {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
  }
}

/* ============================================
   COMPONENT USAGE GUIDE
   ============================================ */

/*

NAVIGATION:
- Title: .s-nav
- Sub Title: .xxs-body
- Nav SubItem (desktop only): .s-body-desktop
- Nav Img Caption: .s-body
- Promo Bar: .s-links
- Utility Nav: .s-nav-stays
- Nav Footer (mobile only): .m-body-mobile

FOOTER:
- Title: .s-links
- Links: .xs-links
- Smaller Links: .xxs-links

HOMEPAGE:
- Hero title: .h1
- Hero subtitle: .l-body-ls
- Intro: .h2
- Carousel Header: .h3
- Carousel Title: .m-body
- Quote: .h3
- Quote Author: .s-body
- Dual Content Header: .h2-tight
- Dual Content Body: .s-body
- Feature Title: .h3
- Feature Caption: .s-body
- Collection Title: .s-body

WELCOME PAGE:
- Header: .h2
- CTA Title: .h3
- CTA Body: .s-body
- Copyright: .xs-body

EXAMPLE HTML:

<div class="hs-b5">
  <!-- Homepage -->
  <h1 class="h1">Welcome to Our Site</h1>
  <p class="l-body-ls">Your journey begins here</p>
  <h2 class="h2">Our Story</h2>
  <h3 class="h3">Featured Products</h3>
  <p class="s-body">Body content goes here</p>
  
  <!-- Navigation -->
  <nav>
    <a class="s-nav">Products</a>
    <span class="xxs-body">New</span>
    <div class="s-body-desktop">Desktop Menu</div>
    <div class="m-body-mobile">Mobile Footer</div>
  </nav>
  
  <!-- Footer -->
  <footer>
    <h3 class="s-links">Company</h3>
    <a class="xs-links">About Us</a>
    <a class="xxs-links">Privacy</a>
  </footer>
</div>

RESPONSIVE BEHAVIOR:

Desktop → Mobile:
.h1          50px → 36px
.h2          36px → 24px
.h2-tight    36px → 24px
.h3          24px → 18px
.l-body      18px → 18px (stays)
.l-body-ls   18px → 18px (loses letter-spacing)
.m-body      16px → 14px
.s-body      14px → 12px
.s-links     14px/500 → 16px/400
.s-nav       14px → 24px
.s-nav-stays 14px → 14px (stays)
.xs-links    12px → 14px
.xs-body     12px → 10px
.xxs-body    10px → 10px (stays)
.xxs-links   10px/500 → 12px/400

*/