:root {
  --c-black: #232d38;
  --c-grey-darker: #3a4652;
  --c-grey-dark: #5a6672;
  --c-grey: #808a94;
  --c-grey-light: #bfc5cb;
  --c-grey-lighter: #dee2e6;
  --c-grey-lightest: #f5f6f8;
  --c-white: #ffffff;
  --c-orange: #f26522;
  --c-dark-blue: #1b2b3c;

  --c-primary: var(--c-orange);
  --c-action: var(--c-orange);
  --c-background: var(--c-grey-lightest);
  --c-highlight: #ff8426;
  --c-positive: #3ac976;
  --c-negative: #d14343;
  --c-pale-background: #fff3e5;

  --c-text-dark: var(--c-dark-blue);
  --c-text: var(--c-grey-dark);
  --c-text-light: var(--c-white);

  --hero-background-color: var(--c-orange);
  --hero-title-color: var(--c-white);
  --hero-text-color: var(--c-white);
  --hero-button-background-color: var(--c-white);
  --hero-button-text-color: var(--c-orange);
  --hero-button-border-color: var(--c-white);

  --hero-benefits-background-color: var(--c-white);
  --hero-benefits-text-color: var(--c-dark-blue);
  --hero-benefits-title-color: var(--c-orange);
  --hero-benefits-link-color: var(--c-primary);

  --nav-link-color: var(--c-white);
  --nav-shadow-color: var(--c-primary);
  --nav-background-color: var(--c-dark-blue);
  --nav-text-color: var(--c-white);
  --nav-button-border-color: var(--c-orange);
  --nav-button-background-color: var(--c-orange);
  --nav-button-text-color: var(--c-white);

  --footer-background-color: var(--c-dark-blue);
  --footer-text-color: var(--c-grey-light);
  --footer-link-color: var(--c-white);

  --page-background-color: var(--c-background);

  --primary-button-background-color: var(--c-orange);
  --primary-button-color: var(--c-white);
  --primary-button-hover-color: #d4551c;

  --link: var(--c-orange);
  --link-hover: var(--c-dark-blue);
  --link-active: #ff8426;

  --callout-background-color: var(--c-dark-blue);
  --callout-text-color: var(--c-white);
  --border-color: rgba(27, 43, 60, 0.1);

  --reviews-section-btn-background: var(--c-grey-lightest);
  --reviews-section-btn-border: var(--c-grey-lighter);
  --reviews-section-btn-text: var(--c-orange);

  --feature-section-button-background-color: var(--c-orange);
  --feature-section-button-border-color: var(--c-orange);
  --feature-section-button-text-color: var(--c-white);

  --c-pale-background: #fff4e3;

  .cta {
    background-color: var(--c-dark-blue);
  }

  .top-section .inset-0 {
    background: #1b2b3ce6 !important;
  }
}