: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-card-bg: #fff;
    --color-error: #d32f2f;
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-info: #2196f3;
    --color-mui-label: rgba(0, 0, 0, 0.6);
    --color-mui-input: rgba(0, 0, 0, 0.06);

    /* 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;

    /* Values calendar feature overrides */
    --button-radius: 99px;

    --button-small-height: 32px;
    --button-height: 42px;
    --button-large-height: 48px;

    --button-small-padding: 0 16px;
    --button-padding: 0 24px;
    --button-large-padding: 0 48px;

    --button-small-font: var(--font-weight-headline) 13px var(--font-headline);
    --button-font: var(--font-weight-headline) 14px var(--font-headline);
    --button-large-font: var(--font-weight-headline) 15px var(--font-headline);

    --button-start-icon-offset: 0;
    --button-text-transform: none;
    --button-large-text-transform: uppercase;

    /* primary buttons */
    --button-color-text: var(--color-primary-dark);
    --button-color-bg: var(--color-primary-bg);
    --button-border: 1px solid transparent;
    --button-color-text-hover: var(--color-primary-dark);
    --button-color-bg-hover: var(--color-primary-bg-hover);
    --button-border-hover: 1px solid transparent;

    /* secondary buttons */
    --button-secondary-color-text: var(--color-primary-dark);
    --button-secondary-color-bg: white;
    --button-secondary-border: 1px solid var(--color-primary);
    --button-secondary-color-text-hover: var(--color-primary-dark);
    --button-secondary-color-bg-hover: white;
    --button-secondary-border-hover: 1px solid var(--color-primary-dark);

    /* text-variant buttons */
    --button-text-color-text: var(--color-primary);
    --button-text-color-text-hover: var(--color-primary);

    /* dark mode buttons */
    --button-dark-color-text: black;
    --button-dark-color-bg: white;
    --button-dark-border: 1px solid transparent;
    --button-dark-color-text-hover: var(--color-text-primary-bg-hover);
    --button-dark-color-bg-hover: #ddd;
    --button-dark-border-hover: 1px solid transparent;

    /* disabled buttons */
    --button-disabled-color-text: #939393;
    --button-disabled-color-bg: var(--color-primary-disabled);
    --button-disabled-border: 1px solid transparent;
  }