:root {
  --mbeef-surface: #f9f9f9;
  --mbeef-surface-bright: #f9f9f9;
  --mbeef-surface-container-lowest: #ffffff;
  --mbeef-surface-container-low: #f3f3f4;
  --mbeef-surface-container: #eeeeee;
  --mbeef-surface-container-high: #e8e8e8;
  --mbeef-surface-container-highest: #e2e2e2;
  --mbeef-on-surface: #1a1c1c;
  --mbeef-on-surface-variant: #5b403e;
  --mbeef-inverse-surface: #2f3131;
  --mbeef-inverse-on-surface: #f0f1f1;
  --mbeef-outline: #8f6f6d;
  --mbeef-outline-variant: #e4beba;
  --mbeef-primary: #970013;
  --mbeef-on-primary: #ffffff;
  --mbeef-primary-container: #bd1c24;
  --mbeef-on-primary-container: #ffd1cd;
  --mbeef-secondary: #635d5a;
  --mbeef-tertiary: #47494a;
  --mbeef-error: #ba1a1a;
  --mbeef-font-display: "Montserrat", system-ui, sans-serif;
  --mbeef-font-body: "Work Sans", system-ui, sans-serif;
  --mbeef-container: 1280px;
  --mbeef-gutter: 24px;
  --mbeef-margin: 64px;
  --mbeef-margin-sm: 20px;
  --mbeef-section: 120px;
  --mbeef-stack-sm: 8px;
  --mbeef-stack-md: 16px;
  --mbeef-stack-lg: 32px;
  --mbeef-radius: 0;
  --mbeef-header-h: 76px;
  --mbeef-drawer-w: min(420px, 100vw);
}

@media (max-width: 768px) {
  :root {
    --mbeef-margin: var(--mbeef-margin-sm);
    --mbeef-section: 72px;
  }
}