@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --paper: #f6f3ec;
  --paper-2: #efeadf;
  --paper-3: #e7e0d2;
  --card: #ffffff;
  --ink: #1a1813;
  --ink-2: #585143;
  --ink-3: #8c8475;
  --line: #e0d9ca;
  --line-strong: #cfc6b4;
  --brand: #e8501f;
  --brand-press: #c53c0e;
  --brand-tint: #fbe7dc;
  --ink-bg: #151309;
  --ink-surface: #211e14;
  --ink-line: #353123;
  --on-ink: #f4f0e6;
  --on-ink-2: #b7ae9c;
  --on-ink-3: #837b6a;
  --brand-on-ink: #f2632e;
  --ok: #2e7d4f;
  --warn: #b97a0c;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(26, 24, 19, 0.05), 0 1px 1px rgba(26, 24, 19, 0.04);
  --sh-2: 0 4px 14px rgba(26, 24, 19, 0.07), 0 2px 5px rgba(26, 24, 19, 0.05);
  --sh-3: 0 18px 48px rgba(26, 24, 19, 0.12), 0 6px 16px rgba(26, 24, 19, 0.07);
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}