/* =========================================================
   INSITECT TYPOGRAPHY SYSTEM

   This file IS the source of truth for type in the theme.
   Component and section CSS MUST NOT define font-family,
   font-size, font-weight, line-height or letter-spacing.
   A component only selects a type-* role.

   tests/typography.html renders every role from this file and
   reports its live computed values, so the specimen cannot
   drift away from the system.
   ========================================================= */

:root {
  --font: Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --h1-size: 42px;
  --h1-weight: 700;
  --h1-line: 51px;
  --h1-track: -0.04em;
  --h2-size: 35px;
  --h2-weight: 700;
  --h2-line: 43px;
  --h2-track: -0.035em;
  --h3-size: 31px;
  --h3-weight: 700;
  --h3-line: 39px;
  --h3-track: -0.03em;
  --h4-size: 27px;
  --h4-weight: 700;
  --h4-line: 34px;
  --h4-track: -0.025em;
  --h5-size: 24px;
  --h5-weight: 700;
  --h5-line: 30px;
  --h5-track: -0.02em;
  --h6-size: 20px;
  --h6-weight: 700;
  --h6-line: 25px;
  --h6-track: -0.015em;
  --text-large-size: 20px;
  --text-large-weight: 400;
  --text-large-line: 27px;
  --text-size: 17px;
  --text-weight: 400;
  --text-line: 24px;
  --text-small-size: 15px;
  --text-small-weight: 400;
  --text-small-line: 21px;
  --ui-size: 16px;
  --ui-weight: 500;
  --ui-line: 21px;
  --ui-strong-size: 16px;
  --ui-strong-weight: 600;
  --ui-strong-line: 21px;
  --label-size: 15px;
  --label-weight: 600;
  --label-line: 20px;
  --meta-size: 14px;
  --meta-weight: 400;
  --meta-line: 19px;
  --legal-size: 13px;
  --legal-weight: 400;
  --legal-line: 18px;
/* Role colours resolve through the theme tokens in tokens.css.
     Light values are identical to the Lab (#1d1d1f / #6e6e73);
     dark values come from the theme. Never hard-code them here. */
  --text-color: var(--text);
  --secondary: var(--text-secondary);
}


/* Shared typography foundation */

.type-h1,
.type-h2,
.type-h3,
.type-h4,
.type-h5,
.type-h6,
.type-text-large,
.type-text,
.type-text-small,
.type-ui-text,
.type-ui-strong,
.type-label,
.type-meta,
.type-legal {
  color: var(--text-color);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}


/* =========================================================
   TYPOGRAPHY ROLES
   ========================================================= */

.type-h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-track);
}

.type-h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-track);
}

.type-h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-track);
}

.type-h4 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line);
  letter-spacing: var(--h4-track);
}

.type-h5 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-line);
  letter-spacing: var(--h5-track);
}

.type-h6 {
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  line-height: var(--h6-line);
  letter-spacing: var(--h6-track);
}

.type-text-large {
  font-size: var(--text-large-size);
  font-weight: var(--text-large-weight);
  line-height: var(--text-large-line);
}

.type-text {
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-line);
}

.type-text-small {
  color: var(--secondary);
  font-size: var(--text-small-size);
  font-weight: var(--text-small-weight);
  line-height: var(--text-small-line);
}

.type-ui-text {
  font-size: var(--ui-size);
  font-weight: var(--ui-weight);
  line-height: var(--ui-line);
}

.type-ui-strong {
  color: var(--brand);
  font-size: var(--ui-strong-size);
  font-weight: var(--ui-strong-weight);
  line-height: var(--ui-strong-line);
}

.type-label {
  color: var(--brand);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-line);
}

.type-meta {
  color: var(--secondary);
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  line-height: var(--meta-line);
}

.type-legal {
  color: var(--secondary);
  font-size: var(--legal-size);
  font-weight: var(--legal-weight);
  line-height: var(--legal-line);
}

/* Existing code type roles, moved here without changing their values. */
.post-article-section p code,
.post-article-section li code,
.post-article-section td code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
  font-size: 0.9em;
}

.post-code-block code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
  font-size: 0.92em;
}