/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* Set font family, weight, line height and letter spacing for all headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-primary);
  scroll-margin: 40px;
  vertical-align: middle;
}

h1, .h1 {
  font-size: var(--responsive-header1-size);
  font-weight: var(--responsive-header1-weight);
  line-height: var(--responsive-header1-line-height);
}

h2, .h2 {
  font-size: var(--responsive-header2-size);
  font-weight: var(--responsive-header2-weight);
  line-height: var(--responsive-header2-line-height);
}

/* h3 {
  font-weight: var(--type-header-1000-weight-ultrabold);
  font-size: var(--type-header-1000-size);
  line-height: var(--type-header-1000-line-height);
}

h3.varince {
  font-weight: var(--font-weight-semibold);
} */

h4, .h4 {
  font-size: var(--responsive-header4-size);
  font-weight: var(--responsive-header4-weight);
  line-height: var(--responsive-header4-line-height);
}

h5 {
  font-size: var(--responsive-header5-size);
  font-weight: var(--responsive-header5-weight);
  line-height: var(--responsive-header5-line-height);
}

h6 {
  font-size: var(--responsive-header6-size);
  font-weight: var(--responsive-header6-weight);
  line-height: var(--responsive-header6-line-height);
}

/* ================================================
   BODY TYPOGRAPHY CLASSES
   Usage: add class directly to any element
   e.g. <p class="body-700">...</p>
   ================================================ */

/* ---- Body 700 Medium (responsive) ---- */
.body-700 {
  font-size: var(--responsive-body-700-size);
  font-weight: var(--responsive-body-700-weight);
  line-height: var(--responsive-body-700-line-height);
  font-family: var(--font-family-primary);
}

/* ---- Body 700 Semibold (fixed all breakpoints) ---- */
.body-700-semibold {
  font-size: var(--fixed-body-700-size);
  font-weight: var(--fixed-body-700-weight);
  line-height: var(--fixed-body-700-line-height);
  font-family: var(--font-family-primary);
}

/* ---- Body 600 Medium (responsive) ---- */
.body-600 {
  font-size: var(--responsive-body-600-size);
  font-weight: var(--responsive-body-600-weight);
  line-height: var(--responsive-body-600-line-height);
  font-family: var(--font-family-primary);
}

/* ---- Body 600 Bold (responsive, tokens.css handles breakpoints) ---- */
.body-600-bold {
  font-size: var(--fixed-body-600-bold-size);
  font-weight: var(--fixed-body-600-bold-weight);
  line-height: var(--fixed-body-600-bold-line-height);
  font-family: var(--font-family-primary);
}

/* ---- Body 500 Medium (responsive) ---- */
.body-500 {
  font-size: var(--responsive-body-500-size);
  font-weight: var(--responsive-body-500-weight);
  line-height: var(--responsive-body-500-line-height);
  font-family: var(--font-family-primary);
}

/* ---- Body 400 Regular (responsive) ---- */
.body-400 {
  font-size: var(--responsive-body-400-size);
  font-weight: var(--responsive-body-400-weight);
  line-height: var(--responsive-body-400-line-height);
  font-family: var(--font-family-primary);
}

/* ---- Body 400 Bold (responsive) ---- */
.body-400-bold {
  font-size: var(--body-400-bold-size);
  font-weight: var(--body-400-bold-weight);
  line-height: var(--body-400-bold-line-height);
  font-family: var(--font-family-primary);
  
}

/* ---- Body 200 Surt Regular (fixed) ---- */
.body-200 {
  font-size: var(--responsive-body-200-size);
  font-weight: var(--responsive-body-200-weight);
  line-height: var(--responsive-body-200-line-height);
  font-family: var(--responsive-body-200-font-family);
}

/* ---- Body 200 Bold (fixed) ---- */
.body-200-bold {
  font-size: var(--fixed-body-200-bold-size);
  font-weight: var(--fixed-body-200-bold-weight);
  line-height: var(--fixed-body-200-bold-line-height);
  font-family: var(--font-family-primary);
}

/* ---- Body 200 Mono (fixed, NB Akademie Mono Std) ---- */
.body-200-mono {
  font-size: var(--fixed-body-200-mono-size);
  font-weight: var(--fixed-body-200-mono-weight);
  line-height: var(--fixed-body-200-mono-line-height);
  font-family: var(--fixed-body-200-mono-font-family);
}

/* ---- Body 100 Surt Regular (fixed) ---- */
.body-100 {
  font-size: var(--responsive-body-100-size);
  font-weight: var(--responsive-body-100-weight);
  line-height: var(--responsive-body-100-line-height);
  font-family: var(--responsive-body-100-font-family);
}

/* ---- Body 100 Mono (fixed, NB Akademie Mono Std, 104% LH) ---- */
.body-100-mono {
  font-size: var(--fixed-body-100-mono-size);
  font-weight: var(--fixed-body-100-mono-weight);
  line-height: var(--fixed-body-100-mono-line-height);
  font-family: var(--fixed-body-100-mono-font-family);
}

/* ---- Body 50 Medium (fixed) ---- */
.body-50 {
  font-size: var(--responsive-body-50-size);
  font-weight: var(--responsive-body-50-weight);
  line-height: var(--responsive-body-50-line-height);
  font-family: var(--font-family-primary);
}

/* ---- Body 45 Regular (fixed) ---- */
.body-45 {
  font-size: var(--responsive-body-45-size);
  font-weight: var(--responsive-body-45-weight);
  line-height: var(--responsive-body-45-line-height);
  font-family: var(--font-family-primary);
}

.display {
  font-size: var(--responsive-display-size);
  font-weight: var(--responsive-display-weight);
  line-height: var(--responsive-display-line-height);
  font-style: normal;
}