/* Hochflieger — generated from tokens.json */

@font-face {
  font-family: "Architects Daughter";
  src: url("fonts/ArchitectsDaughter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme="blueprint"] {
  --hf-straw: #eeec87;
  --hf-khaki: #bbbb77;
  --hf-olive: #aeac47;
  --hf-ink: #222222;
  --hf-mist: #eeeeee;
  --bp-navy: #0b2a3a;
  --bp-sheet: #1a5573;
  --bp-line: #3f84a8;
  --bp-grid: #b2d6d4;
  --bp-chalk: #f8f7e2;
  --bp-chalk-dim: #c9d3cd;
  --bp-graphite: #44482f;
  --surface: var(--bp-sheet);
  --surface-shade: var(--bp-navy);
  --ink: var(--bp-chalk);
  --ink-muted: var(--bp-chalk-dim);
  --hand-ink: var(--hf-straw);
  --link: var(--hf-straw);
  --line: var(--bp-chalk-dim);
  --grid: var(--bp-line);
  --accent: var(--hf-straw);
  --on-accent: var(--hf-ink);
  --highlight: var(--hf-olive);
  --focus: var(--hf-straw);
  --draw-object: var(--bp-chalk);
  --draw-dimension: var(--bp-chalk-dim);
  --draw-hatch: var(--hf-olive);
}

[data-theme="straw"] {
  --surface: var(--hf-straw);
  --surface-shade: var(--hf-khaki);
  --ink: var(--hf-ink);
  --ink-muted: var(--bp-graphite);
  --hand-ink: var(--bp-sheet);
  --link: var(--bp-sheet);
  --line: var(--bp-line);
  --grid: var(--bp-grid);
  --accent: var(--bp-sheet);
  --on-accent: var(--bp-chalk);
  --highlight: var(--hf-olive);
  --focus: var(--bp-navy);
  --draw-object: var(--hf-ink);
  --draw-dimension: var(--bp-sheet);
  --draw-hatch: var(--bp-grid);
}

:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --grid-pitch: 96px;
  --grid-strength: 0.18;
  --grid-strength-shade: 0.13;
  --grid-strength-straw: 0.25;
  --stroke-heavy: 3.5px;
  --stroke-medium: 2px;
  --stroke-thin: 1.25px;
  --stroke-hair: 0.75px;
  --dash-hidden: 7 5;
  --dash-center: 18 4 3 4;
  --dash-cut: 24 4 3 4 3 4;
  --wobble-frequency: 0.012;
  --wobble-scale: 4;
  --overshoot: 1.5px;
  --font-hand: "Architects Daughter", "Comic Neue", "Segoe Print", cursive;
  --font-text: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

.display {
  font-family: var(--font-hand);
  font-size: 64px;
  line-height: 64px;
  font-weight: 400;
}

.heading {
  font-family: var(--font-hand);
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
}

.lede {
  font-family: var(--font-hand);
  font-size: 21px;
  line-height: 31px;
  font-weight: 400;
}

.annotation {
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.body {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

.label {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
}