@layer reset, base, layout, components, utilities;

:root {
  color-scheme: light;
  --color-page: #fbfaf7;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f0e8;
  --color-text: #18201f;
  --color-muted: #66706d;
  --color-primary: #0b4f4a;
  --color-primary-strong: #073c38;
  --color-accent: #d98a07;
  --color-accent-soft: #f8e6be;
  --color-border: color-mix(in srgb, var(--color-text) 14%, transparent);
  --color-danger: #9f2f2d;
  --font-ui: "Helvetica Neue", "SF Pro Display", system-ui, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-1: 0.35rem;
  --radius-2: 0.5rem;
  --max-width: 86rem;
  --line: 1px solid var(--color-border);
}