@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;500;600;700&display=swap');

:root {
  /* base */
  --color-cream: #faf4eb;
  --color-cream-soft: #eedcb9;
  --color-ink: #130b08;
  --color-brown: #5a3930;
  --color-red: #b32130;
  --color-orange: #ee8f58;
  --color-gold: #e9b543;
  --color-olive: #a5ad42;

  /* semantic */
  --surface-page: var(--color-cream);
  --surface-card: var(--color-cream-soft);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-brown);
  --accent-primary: var(--color-red);
  --accent-secondary-1: var(--color-orange);
  --accent-secondary-2: var(--color-gold);
  --accent-secondary-3: var(--color-olive);
  --border-default: rgba(19,11,8,0.15);
  --border-strong: var(--color-ink);
}

:root {
  --font-display: 'Caprasimo', serif;
  --font-body: 'Figtree', sans-serif;

  --text-display: 52px;
  --text-h2: 28px;
  --text-body: 16px;
  --text-label: 13px;
  --text-caption: 12px;
  --tracking-caption: 0.12em;
}

:root {
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
}