/* Global reset and typography rules. Load after common.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body,
button,
input,
select,
textarea {
  font-family: var(--font-primary);
}

body.bg-background.text-on-background.font-body-md,
body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

body h1[class],
body h2[class],
body h3[class],
body h4[class],
body h5[class],
body h6[class] {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

body h1 { font-size: var(--fs-h1); line-height: var(--lh-heading-tight); }
body h2 { font-size: var(--fs-h2); }
body h3 { font-size: var(--fs-h3); }
body h4 { font-size: var(--fs-h4); }
body h5 { font-size: var(--fs-h5); }
body h6 { font-size: var(--fs-h6); }

body h1[class] { font-size: var(--fs-h1); line-height: var(--lh-heading-tight); }
body h2[class] { font-size: var(--fs-h2); }
body h3[class] { font-size: var(--fs-h3); }
body h4[class] { font-size: var(--fs-h4); }
body h5[class] { font-size: var(--fs-h5); }
body h6[class] { font-size: var(--fs-h6); }

body p,
body li,
body dd {
  line-height: var(--lh-body);
}

body small,
body .text-small,
body .text-caption {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
}

body .text-caption {
  font-size: var(--fs-caption);
}

body button,
body [role='button'],
body input,
body select,
body textarea {
  font-size: var(--fs-body);
  line-height: var(--lh-label);
}

body nav,
body nav a,
body nav button,
body .font-label-md,
body .font-label-sm,
body .font-label-sm-mobile,
body .text-label-md,
body .text-label-sm,
body .text-label-sm-mobile {
  font-family: var(--font-primary);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

body .text-body-lg {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

body .text-body-md {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

body .text-body-sm {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-sm);
}

body .font-headline-lg,
body .font-headline-lg-mobile,
body .font-display-lg,
body .font-display-lg-mobile {
  font-family: var(--font-heading);
}

body .text-headline-lg { font-size: var(--fs-h2); }
body .text-headline-md { font-size: var(--fs-h3); }
body .text-display-lg,
body .text-display-lg-mobile { font-size: var(--fs-h1); }

body .material-symbols-outlined {
  font-family: var(--font-icon);
  line-height: 1;
  letter-spacing: normal;
}

body :is(input, select, textarea)::placeholder {
  font: inherit;
  opacity: 0.7;
}