/* The type scale: one set of sizes, weights and line heights for the whole site.
   Author: Pravash Karki - pravashkarki.com
   Two typefaces. Omnes at its condensed width sets the two largest headings. Mulish sets the rest.
   Sizes come from the design-system tokens (--text-h1 to --text-h6; aliases --type-h1 to --type-h6).
   h1 and h2 grow with the screen (32 to 44, 26 to 32); h3 to h6 stay fixed.
   Words are the near-black blue everywhere; quiet words are the muted tone. No grey is typed here.
   This file sets the base. A part that sizes its own words keeps its size until that part is rebuilt. */

:root {
  /* Exact clamps: the generated fluid mins are a step larger. Same values as design-system/components. */
  --text-h1: clamp(2rem, 1.4rem + 2vw, 2.75rem);        /* 32 to 44 */
  --text-h2: clamp(1.625rem, 1.3rem + 1vw, 2rem);       /* 26 to 32 */
  --type-lead: 1.125rem;                                /* 18, an opening paragraph */
  --type-body: 1rem;                                    /* 16 */
  --type-small: 0.875rem;                               /* 14, captions, labels, fine print */
}

body {
  color: var(--color-contrast);
  font-size: var(--type-body);
  font-weight: var(--weight-450, 450);
  line-height: var(--leading-body);
}
p, li, dd, td, th {
  color: var(--color-contrast);
  font-weight: var(--weight-450, 450);
  line-height: var(--leading-body);
}
p { font-size: var(--type-body); }
/* Long reading on a wide screen: one step larger and looser. Ordinary copy stays 16 / 1.5. */
.lead { font-size: var(--text-body-xl); line-height: var(--leading-loose); }

h1, .h1 { font-size: var(--type-h1); line-height: var(--leading-tight); }
h2, .h2 { font-size: var(--type-h2); line-height: var(--leading-heading); }
h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-body); font-weight: 800; letter-spacing: 0; }
h3, .h3 { font-size: var(--type-h3); line-height: var(--leading-heading); }
h4, .h4 { font-size: var(--type-h4); line-height: var(--leading-heading); }
h5, .h5 { font-size: var(--type-h5); line-height: var(--leading-heading); }
h6, .h6 { font-size: var(--type-h6); line-height: var(--leading-heading); color: var(--color-muted); }

strong, b { font-weight: 700; }
small, .small, figcaption { font-size: var(--type-small); line-height: var(--leading-body); }