@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2");
}

:root {
  --font-display: "Source Serif 4", Georgia, serif;
  --font-ui: "Source Sans 3", "Segoe UI", sans-serif;

  --colour-canvas: #f7f3ea;
  --colour-surface: #fffdf8;
  --colour-green: #24513f;
  --colour-green-dark: #193c2e;
  --colour-charcoal: #202522;
  --colour-muted: #5c655f;
  --colour-clay: #a9523b;
  --colour-clay-soft: #f3e2da;
  --colour-stone: #d9d2c7;
  --colour-stone-soft: #eee9e1;
  --colour-focus: #c76500;
  --colour-white: #ffffff;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-control: 0.5rem;
  --radius-panel: 0.75rem;
  --border: 1px solid var(--colour-stone);
  --reading-width: 70ch;
  --shell-width: 74rem;
}