:root {
  color-scheme: light;
  --color-ink: #17201a;
  --color-muted: #526159;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f5f1;
  --color-surface-code: #f7f8f6;
  --color-surface-translucent: rgb(255 255 255 / 96%);
  --color-border: #d7ddd5;
  --color-brand: #255b3d;
  --color-brand-dark: #173d29;
  --color-brand-tint: #edf6f0;
  --color-brand-ring: rgb(37 91 61 / 15%);
  --color-on-brand: #ffffff;
  --color-focus: #0b63ce;
  --color-danger: #b52a22;
  --color-danger-ink: #9c241d;
  --color-danger-surface: #fff3f1;
  --color-danger-ring: rgb(181 42 34 / 12%);
  --color-hero-start: #f7f4ea;
  --color-hero-end: #edf4ee;
  --image-select-chevron:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23526159' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --shadow-card: 0 1px 3px rgb(23 32 26 / 6%), 0 4px 14px rgb(23 32 26 / 5%);
  --shadow-card-lg: 0 8px 30px rgb(23 32 26 / 9%);
  --radius-small: 0.5rem;
  --radius-medium: 0.875rem;
  --radius-large: 1rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --content-width: 72rem;
  --text-width: 46rem;
}