/*
 * Design tokens: the colours, fonts, radius and spacing of this site.
 * Edit them in the Design panel, or here. Use them in your CSS as
 * var(--color-primary), var(--font-display), var(--radius-md), var(--space-md)…
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --color-primary: #6b3f24;
  --color-accent: #c96a1f;
  --color-background: #fbf6ef;
  --color-surface: #f2e8dc;
  --color-text: #241a12;
  --color-muted: #6c5a4b;
  --color-border: #e3d5c4;
  --color-danger: #9c3418;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
}