:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #797a5f;
  --color-accent-2: #797a5f;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: color-mix(in oklch, #797a5f 12%, white);
  --color-accent-200: color-mix(in oklch, #797a5f 25%, white);
  --color-accent-300: color-mix(in oklch, #797a5f 45%, white);
  --color-accent-400: color-mix(in oklch, #797a5f 70%, white);
  --color-accent-500: #797a5f;
  --color-accent-600: color-mix(in oklch, #797a5f 85%, black);
  --color-accent-700: color-mix(in oklch, #797a5f 70%, black);
  --color-accent-800: color-mix(in oklch, #797a5f 55%, black);
  --color-accent-900: color-mix(in oklch, #797a5f 40%, black);
  /* accent-2 ramp aliases accent, per the source page override */

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-5: 17px;
  --space-6: 20.4px;
  --space-8: 27.2px;
  --space-10: 34px;
  --space-12: 40.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  --z-nav: 30;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-modal: 250;
  --z-toast: 300;
  --z-tooltip: 350;
}