:root {
    /* theme colors */
    --color-primary: #799d81;
    --color-primary-bg: #cfdcd1;
    --color-primary-bg-hover: #afc4b3;
    --color-primary-disabled: #d8d8d8;
    --color-primary-dark: #2b3d31;

    --color-secondary: #edab40;
    --color-secondary-bg: #e6cb92;
    --color-secondary-disabled: #d8d8d8;

    --color-danger-bg: #d46059;
    --color-danger-bg-hover: #a94e48;
    --color-danger-disabled: #d88e89;

    /* text colors */
    --color-text: #212121;
    --color-text-light: #5f5f5f;

    /* utility colors */
    --color-page-background: #f1f3f2;
    --color-page-background-dark: #e0e4e2;
    --color-table-stripe: #f5f5f5;
    --color-border: #cccccc;
    --color-divider: #c9d8cd;
    --color-error: #d32f2f;
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-info: #2196f3;
    --color-mui-label: rgba(0, 0, 0, 0.6);

    /* typography */
    --font-headline: Lexend, sans-serif;
    --font-weight-headline: 500;
    --font-body: Inter, Arial, sans-serif;
    --font-monospace: Monaco, Consolas, monospace;
    --space-width-body: 0.33em; /* as observed in FireFox for macOS */
    --space-width-headline: 0.3em; /* as observed in FireFox for macOS */

    /* elevations */
    /* prettier-ignore */
    --elevation-1:
      0px 0px 1px rgba(24, 29, 38, 0.24),
      0px 2px 4px rgba(24, 29, 38, 0.08),
      0px 2px 16px rgba(24, 29, 38, 0.06);
    /* prettier-ignore */
    --elevation-1-inverse:
      0px 0px 1px rgba(24, 29, 38, 0.24),
      0px -2px 4px rgba(24, 29, 38, 0.08),
      0px -2px 16px rgba(24, 29, 38, 0.06);
    /* prettier-ignore */
    --elevation-2:
      0px 0px 1px rgba(24, 29, 38, 0.24),
      0px 6px 8px rgba(24, 29, 38, 0.08),
      0px 18px 32px rgba(24, 29, 38, 0.1);
    --embossed-text-shadow: -1px -1px rgba(0, 0, 0, 0.1);

    /* spacing */
    --spacing-buttons: 16px;
  }