/*
 * Base Typography & Globals — enchase
 * @font-face declarations live inline in base.hubl.html (HubL get_asset_url
 * cannot be used in plain .css files — HubSpot project build rejects HubL
 * syntax in non-template assets).
 */

html {
  font-family: var(--enchase-font-family);
}

body {
  font-family: var(--enchase-font-family);
  font-size: var(--enchase-p-size);
  line-height: var(--enchase-p-lh);
  font-weight: var(--enchase-fw-medium);
  color: var(--enchase-primary);
  background: var(--enchase-white);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-weight: var(--enchase-fw-bold);
  color: var(--enchase-primary);
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: var(--enchase-h1-size); line-height: var(--enchase-h1-lh); }
h2, .h2 { font-size: var(--enchase-h2-size); line-height: var(--enchase-h2-lh); }
h3, .h3 { font-size: var(--enchase-h3-size); line-height: var(--enchase-h3-lh); }
h4, .h4 { font-size: var(--enchase-h4-size); line-height: var(--enchase-h4-lh); }
h5, .h5 { font-size: var(--enchase-h5-size); line-height: var(--enchase-h5-lh); }
h6, .h6 { font-size: var(--enchase-h6-size); line-height: var(--enchase-h6-lh); }

p {
  font-size: var(--enchase-p-size);
  line-height: var(--enchase-p-lh);
  color: var(--enchase-primary);
}

p.lead {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--enchase-primary);
}

small, .small {
  font-size: var(--enchase-small-size);
  line-height: var(--enchase-small-lh);
}

strong, b {
  font-weight: var(--enchase-fw-bold);
}

a {
  color: var(--enchase-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--enchase-duration-fast) var(--enchase-easing-standard);
}

a:hover {
  color: var(--enchase-accent);
}

.tabular-nums {
  font-feature-settings: var(--enchase-font-feature-numerics);
  font-variant-numeric: tabular-nums lining-nums;
}

.body-wrapper--dark, .bg-dark, .bg-primary {
  color: var(--enchase-white);
}

.body-wrapper--dark h1, .body-wrapper--dark h2, .body-wrapper--dark h3,
.body-wrapper--dark h4, .body-wrapper--dark h5, .body-wrapper--dark h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6 {
  color: var(--enchase-white);
}

.bg-dark a, .bg-primary a {
  color: var(--enchase-accent);
}

.bg-dark a:hover, .bg-primary a:hover {
  color: var(--enchase-white);
}