:root {
  /* Colors */
  --m-color-offwhite: #f9f9f9;
  --m-color-gray-1: #eeeeee;
  --m-color-gray-2: #dedede;
  --m-color-gray-3: #ccc;
  --m-color-gray-4: #9c9c9c;
  --m-color-gray-5: #838383;
  --m-color-gray-6: #6e6e6e;
  --m-color-dark: #404040;
  --m-color-darker: #333;
  --m-color-darkest: #282828;
  --m-color-blue-dark: #494eaa;
  --m-color-blue-med: #6990ee;
  --m-color-blue-light: #d8ebfe;
  --m-color-red-dark: #a2204f;
  --m-color-red-med: #eb6176;
  --m-color-red-light: #fce2de;
  --m-color-green-dark: #146146;
  --m-color-green-med: #26a573;
  --m-color-green-light: #ccf3ca;
  --m-color-orange-dark: #963712;
  --m-color-orange-med: #e36f4f;
  --m-color-orange-light: #f6e5bb;

  --m-color-disabled-fg: var(--m-color-gray-4);
  --m-color-disabled-bg: var(--m-color-gray-1);

  --m-color-primary-action: #157bb6;
  --m-color-secondary-action: var(--m-color-blue-med);
  --m-color-tertiary-action: tan;

  --m-color-primary-bg: white;
  --m-color-secondary-bg: #F5F3F7;
  --m-color-tertiary-bg: #fafafa;
  --m-color-border: var(--m-color-gray-2);

  /* Borders */
  --m-border-radius-sm: 2px;
  --m-border-radius-md: 4px;
  --m-border-radius-full: 9999px;


  /* Other */
  --m-max-content-width: 1792px; /* The 16" MacBook Pro */
  --m-input-min-height: 34px;

  /* Spacing (loosely based on Divine Proportions) */
  --m-space-xs: 6px;
  --m-space-sm: 12px;
  --m-space-md: 18px;
  --m-space-lg: 30px;
  --m-space-xl: 48px;

  /* Breakpoints */
  --m-breakpoint-sm: 576px; /* and below is "phone" */
  --m-breakpoint-md: 768px; /* and below is "tablet" */
  --m-breakpoint-lg: 992px;

  /* Font */
  --m-font-size-min: 13px; /* a11y recommendation */
  --m-font-size-default: 16px;
  --m-font-size-lg: 20px;
  --m-font-size-xl: 48px;
}