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

:root {
  color-scheme: light;
  --bg: #f6f1e7;
  --bg-deep: #efe4d6;
  --ink: #171717;
  --muted: #5b5b5b;
  --accent: #d3542c;
  --accent-light: #ff8f5a;
  --accent-dark: #b14320;
  --teal: #1f6f78;
  --card: #fff7ef;
  --stroke: #e3d6c5;
  --shadow: 0 20px 50px rgba(23, 23, 23, 0.12);
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --space-0: 4px;
  --space-1: 6px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 18px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  --space-11: 28px;
  --space-12: 36px;
  --space-13: 48px;
  --space-14: 64px;
  --space-15: 72px;
  --space-16: 88px;
  --space-17: 96px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --size-xxs: 10px;
  --size-xs: 11px;
  --size-sm: 12px;
  --size-md: 14px;
  --size-base: 16px;
  --size-lg: 18px;
  --size-xl: 20px;
  --size-2xl: 24px;
  --size-3xl: 28px;
}