:root {
  --color-typo-primary: #72a5b4;
  --color-typo-header: #0e1c26;
  --color-typo-text: #1d3a4f;
  --color-typo-light: #f7f9fa;
  --color-typo-dark: #425051;
  --color-typo-success: #4eaa74;
  --color-typo-warning: #f9d18a;
  --color-typo-error: #de6057;
  --color-typo-info: #72a5b4;
  --color-text-button: #4b96cc;
  --color-text-button-hover: #3c78a3;

  --color-bg-hero: #f7f9fa;
  --color-bg-primary: #72a5b4;
  --color-bg-primary-hover: #638f9c;
  --color-bg-primary-active: #59818c;
  --color-bg-secondary: #f7f9fa;
  --color-bg-secondary-hover: #eef2f5;
  --color-bg-border: #e5e5e5;
  --color-bg-border-hover: #a3afb9;
  --color-bg-input-switch: #8e98a1;
  --color-bg-error: #c4554d;
  --color-bg-succes: #439163;
  --color-bg-warning: #bfa16a;
  --color-bg-info: #638f9c;

  --step-size: 4px;
  --switch-thumb-position: 0%;
  --main-grid-column-gap: 14px;

  --panel-content-outdent: calc(var(--step-size) * 12);

  --modal-close-button-height: 48px;

  --drop-shadow: drop-shadow(0 9px 18px rgb(38 32 48 / 0.1));

  --transition-duration: 0.24s;
  --transition-cubic-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* TODO: sync color-var-names w/ Figma when
     the Designer commit updated pattern
  */
  --color-old-colors-pearl-grey: #989a9c;
  --color-old-colors-niagar-light: #e6eaed;
  --color-old-colors-niagar-half-light: #c8cfd5;

  --color-contacts-header: #92949C;
  --color-contacts-link: #2B65BA;
  --color-contacts-phone: #222428;
}