:root {
  /**
  * ## Default theme
  */

  /*### Default font settings */

  /*#### Font families */
  --font-family-sans: 'Nunito', sans-serif;

  /*#### Font sizes */
  /*scaling from rem is "more accessible" than setting px sizes directly */
  --font-size-xxx-small: 0.625rem; /* 10px */
  --font-size-xx-small: 0.6875rem; /* 11px */
  --font-size-x-small: 0.75rem; /* 12px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-regular: 1rem; /* 16px */
  --font-size-large: 1.125rem; /* 18px */
  --font-size-x-large: 1.3125rem; /* 21px */
  --font-size-xx-large: 1.5rem; /* 24px */
  --font-size-xxx-large: 1.875rem; /* 30px */

  /*### Default dimensions */

  /*#### radii */
  --dim-radius-x-small: 2px;
  --dim-radius-small: 5px;
  --dim-radius-medium: 16px;
  --dim-radius-large: 22px;
  --dim-radius-dynamic: min(20%, var(--dim-radius-medium));
  --dim-radius-full: 100vmax;

  /*#### padding */
  --dim-padding-xx-small: 2px;
  --dim-padding-x-small: 4px;
  --dim-padding-small: 8px;
  --dim-padding-medium: 12px;
  --dim-padding-large: 16px;
  --dim-padding-x-large: 20px;
  --dim-padding-xx-large: 24px;

  /*#### gaps */
  --dim-gap-x-small: 4px;
  --dim-gap-small: 8px;
  --dim-gap-medium: 16px;
  --dim-gap-large: 24px;
  --dim-gap-x-large: 32px;
  --dim-gap-xx-large: 64px;

  /*### Default colors */

  /*#### utility colors */
  --color-shadow: #00000040;
  --color-contrast: #ffffff;
  --color-flag: #49454f;
  --color-backdrop: #00000080;

  /*#### bkgnd colors */
  --color-bkgnd-body: #f5f5f5;
  --color-bkgnd-content: #ffffff;

  /*#### primary colors */
  --color-primary-bkgnd: #9adaf4;
  --color-primary-fill: #006f9a;
  --color-primary-label: #005475 /* #003a52 */;
  --color-primary-contrast: var(--color-contrast);
  --color-primary-border: var(--color-primary-fill);
  --color-primary-gradient: linear-gradient(
    to right top,
    var(--color-primary-fill) 0%,
    var(--color-primary-label) 100%
  );

  /*#### secondary colors */
  --color-secondary-bkgnd: #c8ddbb;
  --color-secondary-fill: #76ac56;
  --color-secondary-label: #215a08 /* #5e8943 */;
  --color-secondary-contrast: var(--color-contrast);
  --color-secondary-border: var(--color-secondary-fill);
  --color-secondary-gradient: linear-gradient(
    to right top,
    var(--color-secondary-fill) 0%,
    var(--color-secondary-label) 100%
  );

  /*#### emphasize colors */
  --color-em-bkgnd: #fbcd84;
  --color-em-fill: #f7a724;
  --color-em-label: #f69d0b;
  --color-em-contrast: var(--color-contrast);
  --color-em-border: var(--color-em-fill);
  --color-em-gradient: linear-gradient(to right top, var(--color-em-fill) 0%, var(--color-em-label) 100%);

  /*#### neutral colors */
  /* --color-neutral-bkgnd: #e1e3e6;
  --color-neutral-fill: #c4c7cc;
  --color-neutral-label: #727985;
  --color-neutral-contrast: var(--color-contrast); */
  --color-neutral-bkgnd: #f2f2f2;
  --color-neutral-fill: #e6e6e6;
  --color-neutral-label: #999999;
  --color-neutral-contrast: #202020;
  --color-neutral-border: var(--color-neutral-fill);
  --color-neutral-gradient: linear-gradient(
    to right top,
    var(--color-neutral-fill) 0%,
    var(--color-neutral-label) 100%
  );

  /*#### disabled colors */
  --color-disabled-bkgnd: #f2f2f280;
  --color-disabled-fill: #e6e6e680;
  --color-disabled-label: #99999980;
  --color-disabled-contrast: #20202080;
  --color-disabled-border: var(--color-disabled-fill);

  /*#### text colors */
  --color-text-regular: #202020;
  --color-text-comment: #b3b3b3;
  --color-text-placeholder: #d9d9d9;

  /*#### reference colors */
  --color-reference-fill: #5b90a4;
  --color-reference-label: #2f4b56;
  --color-reference-contrast: var(--color-contrast);

  /*#### status colors */
  --color-status-pending: #9d2a5e;
  --color-status-in-progress: #00665f;
  --color-status-overdue: #c70000;
  --color-status-complete: #82bf40;
  --color-status-paused: #808080;
  --color-status-archived: #404040;

  /*#### alert colors */
  --color-alert-warning-fill: #f7a724;
  --color-alert-warning-label: #f69d0b;
  --color-alert-danger-fill: #c70000;
  --color-alert-danger-label: #940000;
  --color-alert-success-fill: #82bf40;
  --color-alert-success-label: #4e7a1f;
  --color-alert-contrast: var(--color-contrast);

  /*
  /* plain elements
  --color-primary: #215a08;
  --color-secondary: #006f9a;
  --color-contrast: #ffffff;
  --color-neutral: #4a4a4a;
  --color-neutral-light: #9b9b9b;
  --color-neutral-bkgnd: #e1e1e1;
  --color-pane-header: #ffffff;
  --color-pane-aside: #d8d8d8;
  --color-pane-main: #f5f5f5;
  --color-panel-main: #ffffff;
  --color-panel-popup: #f9f9f9;
  --color-panel-active: #f5f5f5;
  --color-panel-border: #dddddd;
  --color-shadow: #00000080;

  /* interactive elements
  --color-primary-label: #215a08;
  --color-primary-fill: #76ac56;
  --color-primary-contrast: #ffffff;

  --color-secondary-label: #006f9a;
  --color-secondary-fill: #4b8195;
  --color-secondary-contrast: #ffffff;

  --color-neutral-label: #000000;
  --color-neutral-fill: #dddddd;
  --color-neutral-contrast: #333333;

  --color-bland-label: #000000;
  --color-bland-fill: #828282;
  --color-bland-contrast: #ffffff;

  --color-disabled-label: #808080;
  --color-disabled-fill: #f5f5f5;
  --color-disabled-contrast: #cccccc;

  --color-alert-label: #f69d0b;
  --color-alert-fill: #f7a724;
  --color-alert-contrast: #ffffff;

  --color-fail-label: #e52308;
  --color-fail-fill: #f6270b;
  --color-fail-contrast: #ffffff;

  --color-success-label: #00a500;
  --color-success-fill: #00b800;
  --color-success-contrast: #ffffff;

  /* gradients
  --color-primary-gradient: linear-gradient(to left bottom, rgba(33, 90, 8, 1) 0%, rgba(118, 172, 86, 1) 100%);

  /* status colors
  --color-status-incomplete: #cc4080;
  --color-status-pending: #cc0000;
  --color-status-in-progress: #cc8000;
  --color-status-closed: #00cc00;
  --color-status-paused: #808080;
  --color-status-deferred: #404040;
  --color-status-archived: #4080cc;
  */
}