/* Typography — the only place to change faces, sizes, and weights. */
@font-face {
  font-family: "Office Sans";
  src:
    local("Segoe UI"),
    local("Helvetica Neue"),
    url("/style/fonts/office-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Segoe UI", "Avenir Next", "Helvetica Neue", "Noto Sans", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Cascadia Code", "Consolas", "Liberation Mono", "ui-monospace", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-ui: 650;
  --weight-ui-soft: 550;
}

html {
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  margin: 0 0 1em;
  max-width: 65ch;
}

small,
.text-muted {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

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

button,
input,
select,
textarea {
  font-family: inherit;
}

a:not(.btn) {
  color: var(--color-text-link);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}

a:not(.btn):link,
a:not(.btn):visited {
  color: var(--color-text-link);
}

a:not(.btn):hover,
a:not(.btn):active {
  color: var(--color-text-link-hover);
}