:root {
  // Generic colors
  --color-primary: #257761;
  --color-primary-alt: #e4f4ef;
  --color-primary-alt-2: #4b8576;
  --color-secondary: #295284;
  --color-secondary-alt: #d9eaff;
  --color-tertiary: #552470;
  --color-tertiary-alt: #f7e8ff;
  --color-danger: #9b2023;
  --color-danger-alt: #fccdce;
  --color-warning: #fff58c;
  --color-cost: #ffd580;
  --color-focus: #93cff2;
  --color-notification: #f02849;
  --color-live: #cc190f;

  --color-black: #111;
  --color-white: #fdfdfd;
  --color-white-alt: #fafafa;
  --color-gray-1: #eff1f4;
  --color-gray-2: #d8dde1;
  --color-gray-3: #ced4da;
  --color-gray-4: #abb1b7;
  --color-gray-5: #666a6d;

  // Text
  --color-text: var(--color-black);
  --color-text-subtitle: var(--color-gray-5);
  --color-text-inverse: #fdfdfd;

  // Components

  // Button
  --color-button-primary-bg: var(--color-primary);
  --color-button-primary-text: var(--color-primary-alt);
  --color-button-primary-bg-hover: var(--color-primary-alt-2);
  --color-button-primary-hover-text: var(--color-primary-alt);
  --color-button-secondary-bg: var(--color-secondary-alt);
  --color-button-secondary-border: var(--color-secondary-alt);
  --color-button-secondary-text: var(--color-secondary);
  --color-button-secondary-bg-hover: #b9d0e9;
  --color-button-alt-bg: var(--color-gray-1);
  --color-button-alt-text: var(--color-text);
  --color-button-alt-bg-hover: var(--color-gray-2);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-black);

  // Table
  --color-table-highlight: var(--color-white-alt);

  // Tag
  --color-tag: var(--color-gray-5);
  --color-tag-bg: var(--color-button-alt-bg);
  --color-tag-hover: var(--color-button-alt-text);
  --color-tag-bg-hover: var(--color-button-alt-bg-hover);
}
