/* MakeGoodApps design system v1.0. See BRAND-SYSTEM.md. */
:root {
  --color-paper: #f3f3ec;
  --color-ink: #20231f;
  --color-accent: #c5f65c;
  --color-muted: #686e62;
  --color-line: #d5d7cd;
  --color-surface: #e5e9df;
  --color-on-dark-muted: #b2bba7;
  --color-focus: #557b11;
  --color-status: #718d38;
  --paper: var(--color-paper);
  --ink: var(--color-ink);
  --green: var(--color-accent);
  --line: var(--color-line);
  --muted: var(--color-muted);
  --font: 'DM Sans', Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --gutter: clamp(20px, 4.5vw, 80px);
  --section-space: clamp(64px, 7.3vw, 112px);
  --radius-panel: 4px;
  --radius-icon: 24%;
  --radius-pill: 999px;
  --duration-fast: 180ms;
  --duration-ui: 250ms;
  --ease-ui: cubic-bezier(.2,.8,.2,1);
  --type-caption: 11px;
  --type-small: 12px;
  --type-body: 16px;
}