html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: inherit;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
}

h4,
h5,
h6 {
  font-size: var(--step-1);
}

p,
ul,
ol,
blockquote {
  margin: 0 0 var(--space-4);
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

strong {
  font-weight: 600;
}

small,
.eyebrow,
.meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

/* Hard CMS overrides
   Avada and CMS theme layers often inject their own typography stacks.
   These selectors intentionally pin the shared network fonts globally.
*/
html body,
html body p,
html body li,
html body td,
html body th,
html body label,
html body input,
html body textarea,
html body select,
html body button,
html body .fusion-body,
html body .fusion-text,
html body .fusion-li-item,
html body .fusion-button,
html body .mod_article,
html body .ce_text,
html body .ce_headline {
  font-family: var(--font-ui) !important;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .fusion-title-heading,
html body .entry-title,
html body .page-title,
html body .post-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}

html body code,
html body pre,
html body kbd,
html body samp,
html body small,
html body .eyebrow,
html body .meta,
html body .site-header__brand,
html body .site-header__context-copy {
  font-family: var(--font-mono) !important;
}