:root {
  --color-white: #ffffff;
  --color-white-dark: #f8f8f8;
  --color-black: #17183b;
  --color-black-dark: #000000;
  --color-red: #e64a47;
  --color-red-dark: #dc211e;
  --color-red-light: #fadbda;
  --color-blue: #007ea7;
  --color-blue-light: #d1e1f2;
  --color-gray: #c3c3c3;
  --color-gray-dark: #999;
  --color-gray-light: #e5e5e5;

  --color-theme: var(--color-red);
  --color-theme-light: var(--color-red-light);
  --color-main: #e68053;
  /* TODO:  */
  --color-main-light: #e6805333;
  /* TODO: accent → sub */
  --color-accent: #54ccbe;
  --color-accent-light: #54ccbe1a;
  --color-accent-dark: #357f79;

  --statusColor-success: #43a398;
  /* TODO: lighten 30% */
  /* TODO: dark-color */
  --statusColor-success-light: #6fc1b5;
  --statusColor-success-dark: #357f79;
  --statusColor-info: var(--color-blue);
  --statusColor-info-light: var(--color-blue-light);
  --statusColor-info-dark: var(--color-blue);
  --statusColor-warning: #faa916;
  /* TODO: lighten 30% */
  --statusColor-warning-light: #fde0ac;
  /* TODO: darken 5% */
  --statusColor-warning-dark: #f19d05;
  --statusColor-danger: var(--color-red);
  --statusColor-danger-light: var(--color-red-light);
  --statusColor-danger-dark: var(--color-red-dark);
  --statusColor-important: var(--color-red);
  --statusColor-important-light: var(--color-red-light);
  --statusColor-important-dark: var(--color-red-light);

  --base-font-color: var(--color-black);
  --base-font-color-fade: var(--color-gray-dark);
  --base-bg-color: var(--color-white);
  --base-bg-color-accent: var(--color-white-dark);
  --base-bg-color-dark: var(--color-gray-light);
  --base-border-color: var(--color-gray);
  --base-border-color-light: var(--color-gray-light);
  --base-border-color-strong: var(--color-accent);

  --base-shadow-color: #0000001a;
  --base-shadow-color-dark: #00000028;
  --base-mask-color: #00000080;
  --base-mask-color-light: #ffffff80;
  --base-mask-color-dark: #00000084;

  --button-bg-color: var(--color-white);
  --button-bg-color-hover: var(--color-accent-light);
  --button-border-color: var(--color-accent);
  --button-font-color: var(--color-black);
  --button-disabled-bg-color: #eee;
  --button-disabled-font-color: var(--color-gray-dark);

  --button-primary-bg-color: var(--color-theme);
  --button-primary-bg-color-hover: var(--color-theme-light);
  --button-primary-border-color: transparent;
  --button-primary-font-color: var(--color-white);

  --button-main-bg-color: var(--color-accent-dark);
  --button-main-bg-color-hover: var(--color-accent);
  --button-main-border-color: transparent;
  --button-main-font-color: var(--color-white);

  --input-disabled-bg-color: #f9f9f9;

  --grid-header-border-bottom-color: #eb6e6b;

  --editorjs-drop-target-color: #388ae5;
}