@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

  :root:root {
    /* Sweetspot palette on Dutchie's tokens. Body/surface stay white for the
       product grid (the old menu was white too); the chrome carries the brand. */
    --dcm-color-primary: #00443B;
    --dcm-color-navbar-bg: #FFFEF1;
    --dcm-color-body-bg: #FFFFFF;
    --dcm-color-surface: #FFFFFF;
    --dcm-color-surface-hover: #F7F6EA;
    --dcm-color-surface-muted: #FFFEF1;
    --dcm-color-text-primary: #00443B;
    --dcm-color-text-secondary: #5F6F6B;
    --dcm-color-border: #D9DDD3;
    --dcm-color-focus: #00443B;
    --dcm-color-focus-shadow: #00443B66;
    --dcm-font-primary: 'Work Sans', sans-serif;
    --dcm-font-secondary: 'Work Sans', sans-serif;
    --dcm-radius-buttons: 200px; /* pills, like every button on the marketing site */
    --dcm-header-bg: #FFFEF1;
    --dcm-header-text-color: #00443B;
    --dcm-header-border-color: #00443B;
    --dcm-nav-link-color: #00443B;
    --dcm-nav-link-hover-color: #9DBC97;
    --dcm-nav-link-active-color: #00443B;
    --dcm-footer-bg: #00443B;
    --dcm-footer-text-color: #FFFEF1;

    /* The marketing site's tokens (app/globals.css), for the ported chrome CSS. */
    --sweetspotDarkGreen: #00443B;
    --sweetspotCream: #FFFEF1;
    
  --sweetspotDarkGreen: #00443B;
  --sweetspotCream: #FFFEF1;
  --font-legacy-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-menu: 400 16px/normal 'Work Sans', sans-serif;
  --font-menu-large: 400 20px/normal 'Work Sans', sans-serif;
  --font-button: 500 20px/normal 'Work Sans', sans-serif;
  --font-button-medium: 500 18px/normal 'Work Sans', sans-serif;
  --font-button-small: 500 14px/normal 'Work Sans', sans-serif;
  --font-small-body: 14px/1.4 'Work Sans', sans-serif;
  --font-very-small-body: 14px/1.4 'Work Sans', sans-serif;
  --font-large-body: 400 44px/1.4 'Work Sans', sans-serif;
  --font-medium-body: 20px/1.4 'Work Sans', sans-serif;
  --font-medium-ish-body: 16px/1.4 'Work Sans', sans-serif;
  --font-small-title: 400 26px/1.4 'Work Sans', sans-serif;
  --font-very-small-title: 400 22px/1.4 'Work Sans', sans-serif;
  --font-medium-title: 400 32px/1.4 'Work Sans', sans-serif;
  --font-mono: 400 20px/20px 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  --font-mono-small: 400 16px/20px 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  --font-small-title-spacing: 1px;
  --font-medium-title-spacing: 1px;
  --font-menu-letter-spacing: 1px;
  --font-button-letter-spacing: 1px;
  --font-large-body-letter-spacing: 1px;
  --font-medium-body-letter-spacing: 1px;

  }

  body {
    background: var(--dcm-color-body-bg);
    color: var(--dcm-color-text-primary);
  }