@font-face {
  font-family: "Geist";
  src: url("assets/geist-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f4f1e8;
  --ink: #11130f;
  --muted: #686a62;
  --rule: #cfcec3;
  --green: #73ad3f;
  --yellow: #f2c62f;
  --orange: #ee872b;
  --red: #db4835;
  --purple: #964b91;
  --blue: #3b82b8;

  --color-paper: var(--paper);
  --color-paper-soft: #fbfaf4;
  --color-paper-deep: #ebe6d8;
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-muted-strong: #575951;
  --color-rule: var(--rule);
  --color-focus: #1b5f32;
  --color-green: var(--green);
  --color-green-ink: #244119;
  --color-error: #a52c27;
  --color-error-soft: #f6e5df;
  --color-success: #24623a;
  --color-success-soft: #e5efdf;

  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 20px;
  --text-xl: clamp(38px, 6vw, 72px);
  --text-heading: clamp(30px, 3.3vw, 46px);

  --radius-sm: 2px;
  --radius-md: 8px;
  --rule-thin: 1px solid var(--color-rule);
  --rule-strong: 1px solid var(--color-ink);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 180ms;
}