/* Shared Silvachar typography and control system. Loaded after page-specific CSS. */
:root {
  --silvachar-body-font: var(--sans, "Barlow", Arial, sans-serif);
  --silvachar-heading-font: var(--condensed, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
}

html body {
  font-family: var(--silvachar-body-font);
  font-weight: 400;
}

html body h1,
html body h2,
html body h3,
html body h4 {
  margin-top: 0;
  font-family: var(--silvachar-heading-font) !important;
  font-weight: 700 !important;
  text-wrap: balance;
}

html body h1 { line-height: .9; letter-spacing: -.04em; }
html body h2 { line-height: .94; letter-spacing: -.035em; }
html body h3 { line-height: 1; letter-spacing: -.025em; }
html body h4 { line-height: 1.05; letter-spacing: -.018em; }

html body h1 { font-size: clamp(3.5rem, 8vw, 7rem); }
html body h2 { font-size: clamp(2.4rem, 5vw, 4.75rem); }
html body h3 { font-size: clamp(1.55rem, 2.6vw, 2.35rem); }
html body h4 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); }

html body :is(.button,.nav-cta,.blog-read-more,.application-cta,.contact-submit,.hero-calculator-arrow,button[type="submit"],input[type="submit"]) {
  font-family: var(--silvachar-heading-font) !important;
  font-weight: 700 !important;
}

html body :is(button,.button,.nav-cta,[role="button"]) { cursor: pointer; }

html body :is(a,button,input,select,textarea):focus-visible {
  outline: 3px solid #00A800;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  html body h1,
  html body h2,
  html body h3,
  html body h4 { text-wrap: pretty; }
}