/* Almanac design tokens, borrowed from the mobile app's theme
   (apps/mobile/src/ui/theme.ts, docs/plans/2026-09-23-design-almanac.md) as
   plain CSS custom properties. Keep these two in sync by hand — there's no
   shared package between a React Native theme file and a stylesheet. */
:root {
  --color-paper: #f5f0e6;
  --color-ink: #1d2621;
  --color-muted: #58615a; /* 5.8:1 on paper */
  --color-rule: #d6ccb8;
  --color-marsh: #2e6a52;
  --color-brick: #9a4526;
  --color-tint: #e9e1d0;
  --color-field-bg: #fffdf8;

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;

  --radius-sm: 6px;
  --radius-md: 12px;
}