/* Bengal Origin Co. — Typography */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  color: var(--color-charcoal);
  line-height: var(--line-height-body);
  background-color: var(--color-cream);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 300;
  line-height: var(--line-height-tight);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: var(--line-height-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--line-height-tight);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: 1.4;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: 1.4;
}

.body-lg {
  font-size: var(--text-body-lg);
  font-weight: 300;
}

.body-sm {
  font-size: var(--text-body-sm);
  font-weight: 300;
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .display { font-size: calc(var(--text-display) * 0.85); }
  h1, .h1 { font-size: calc(var(--text-h1) * 0.85); }
  h2, .h2 { font-size: calc(var(--text-h2) * 0.85); }
  h3, .h3 { font-size: calc(var(--text-h3) * 0.85); }
}