:root {
  color-scheme: light;

  --disabled-bg: #D9DEE2;
  --disabled-text: #7D7F81;
  --disabled-border: #d3d7dc;

  --primary: #007D65;
  --secondary: #343A40;
  --tertiary: #23A98A;

  --base-background-light: #FFFFFF;
  --base-background: #FAFAFA;
  --base-background-medium: #EFF1F3;
  --base-background-dark: #343A40;

  --hovered-bg: #D6FAF3;
  --selected-bg: #EFF1F3;
  --focus-bg: #23A98A;

  --base-text: #343A40;

  --hint-color: #5D6E7E;
  --placeholder-text: #5D6E7E;

  --blue-extra-light: #D8EEFF;
  --blue-light: #4CB5FF;
  --info-light: #009AFF;
  --info: #0081DB;
  --info-dark: #2A61B5;

  --green-light: #E3FFF8;
  --success-light: #70CA8F;
  --success: #20B773;
  --success-dark: #1C8262;

  --orange-light: #FFFBE3;
  --warning-light: #FFA43A;
  --warning: #FF7600;
  --warning-dark: #C15101;

  --red-light: #FFE2E2;
  --error-light: #FF4E7A;
  --error: #EB0033;
  --error-dark: #CB1442;

  --completed: #000000;
  --neutral: #DCE4E8;
  --unassigned: #5D6E7E;

  --extra-light-gray: #EFF1F3;
  --light-gray: #E2E7EC;
  --medium-gray: #9FABB9;
  --dark-gray: #4F5660;

  --white: #ffffff;
  --black: #000000;

  --border-color: #E2E7EC;
  --shadow-color: #343A40;

  --box-shadow-border: 0px 0px 0px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent);
  --box-shadow: 0 3px 5px 1px color-mix(in srgb, var(--shadow-color) 5%, transparent);
  --top-box-shadow: 0 -2px 2px color-mix(in srgb, var(--shadow-color) 5%, transparent);
  --bottom-box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-color) 5%, transparent);
  --left-box-shadow: -2px 0 2px color-mix(in srgb, var(--shadow-color) 5%, transparent);
  --right-box-shadow: 2px 0 2px color-mix(in srgb, var(--shadow-color) 5%, transparent);

  --header-box-shadow: 0 2px 2px color-mix(in srgb, var(--shadow-color) 10%, transparent);
}