:root {
  /* Colors */
  --color-primary: #002020;
  --color-accent: #bc9c22;
  --color-surface: #ffffff;
  --color-surface-variant: #f2ead3;
  --color-background: #f2ead3;
  --color-surface-inverse: #002020;
  --color-on-primary: #f0ead6;
  --color-text: #002020;
  --color-text-inverse: #ffffff;
  --color-border: #002020;
  --color-label-active: #002020;
  --color-label-inactive: #406040;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Typography */
  --font-family-h1: 'CormorantGaramond-Bold';
  --font-size-h1: 32px;
  --font-weight-h1: 1200;

  --font-family-h2: 'Inter_24pt-Bold';
  --font-size-h2: 24px;
  --font-weight-h2: 700;

  --font-family-h3: 'Inter_24pt-SemiBold';
  --font-size-h3: 20px;
  --font-weight-h3: 600;

  --font-family-body: 'Inter_24pt-Regular';
  --font-size-body: 16px;
  --font-weight-body: 400;

  --font-family-button: 'Inter_24pt-SemiBold';
  --font-size-button: 16px;
  --font-weight-button: 600;

  --font-family-small: 'Inter_24pt-Regular';
  --font-size-small: 14px;
  --font-weight-small: 400;

  --font-family-whimsical: 'CormorantGaramond-Regular';
  --font-size-whimsical: 18px;
  --font-weight-whimsical: 300;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
}

/* Global resets and base styles */
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
}
a {
  color: var(--color-primary);
  text-decoration: none;
}
button {
  font-family: var(--font-family-button);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  border-radius: var(--radius-sm);
}

/* Utility classes */
.mt-md { margin-top: var(--spacing-md); }
.mb-md { margin-bottom: var(--spacing-md); }
.pt-md { padding-top: var(--spacing-md); }
.pb-md { padding-bottom: var(--spacing-md); }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }