:root {
  --color-primary: #7a5900;
  --color-primary-container: #D4A84B;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #FFF4F1;
  --color-secondary: #765937;
  --color-secondary-container: #ffddb9;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #5c4222;
  --color-tertiary: #5b5143;
  --color-tertiary-container: #74695a;
  --color-on-tertiary: #FFFFFF;
  --color-on-tertiary-container: #FFF5EA;
  --color-surface: #FFF8F4;
  --color-surface-dim: #e8d7c6;
  --color-surface-bright: #FFF8F4;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #fff1e5;
  --color-surface-container: #fdebd9;
  --color-surface-container-high: #f7e5d4;
  --color-surface-container-highest: #f1e0ce;
  --color-on-surface: #231a0f;
  --color-on-surface-variant: #5c5043;
  --color-outline: #827566;
  --color-outline-variant: #d4c4b3;
  --color-inverse-surface: #392f23;
  --color-inverse-on-surface: #ffeedd;
  --color-inverse-primary: #f4be48;
  --color-error: #BA1A1A;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD6;
  --color-on-error-container: #93000A;
  --color-surface-tint: #7a5900;

  --font-headline: 'NineBarsHeadline', serif;
  --font-body: 'NineBarsBody', sans-serif;
  --font-label: 'NineBarsBody', sans-serif;

  --radius-button: 0.75rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-sm: 0.5rem;
  --radius-full: 9999px;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
}