:root {
  /* Brand Colors */
  --c-dark-blue: #003373;
  --c-light-grey: #b8babc;
  --c-white: #ffffff;

  /* Primary Palette */
  --c-black: var(--c-dark-blue);
  --c-grey-darker: #1f1f29;
  --c-grey-dark: #3c3c4a;
  --c-grey: #5a5a6a;
  --c-grey-light: #8c8e9c;
  --c-grey-lighter: #d4d6da;
  --c-grey-lightest: #f1f3f6;

  --c-primary: var(--c-dark-blue);
  --c-action: var(--c-dark-blue);
  --c-background: var(--c-grey-lightest);
  --c-highlight: #ff6a23;
  --c-positive: #489624;
  --c-negative: #ca2727;
  --c-pale-background: #fffad1;

  /* Text Colors */
  --c-text-dark: var(--c-dark-blue);
  --c-text: var(--c-grey-dark);
  --c-text-light: var(--c-white);

  /* Hero Section */
  --hero-background-color: var(--c-dark-blue);
  --hero-title-color: var(--c-white);
  --hero-text-color: var(--c-white);
  --hero-button-background-color: var(--c-light-grey);
  --hero-button-text-color: var(--c-dark-blue);
  --hero-button-border-color: var(--c-light-grey);

  /* Hero Benefits */
  --hero-benefits-background-color: var(--c-white);
  --hero-benefits-text-color: var(--c-dark-blue);
  --hero-benefits-title-color: var(--c-dark-blue);
  --hero-benefits-link-color: var(--c-dark-blue);

  /* Navigation */
  --nav-link-color: var(--c-dark-blue);
  --nav-shadow-color: var(--c-primary);
  --nav-background-color: var(--c-white);
  --nav-text-color: var(--c-white);
  --nav-button-border-color: var(--c-action);
  --nav-button-background-color: var(--c-action);
  --nav-button-text-color: var(--c-white);

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

  /* Page */
  --page-background-color: var(--c-background);

  /* Buttons */
  --primary-button-background-color: var(--c-dark-blue);
  --primary-button-color: var(--c-white);
  --primary-button-hover-color: var(--c-light-grey);

  /* Links */
  --link: var(--c-dark-blue);
  --link-hover: var(--c-grey-dark);
  --link-active: var(--c-grey);

  /* Callout */
  --callout-background-color: var(--c-dark-blue);
  --callout-text-color: var(--c-white);
  --border-color: var(--c-dark-blue);

  /* Reviews Section */
  --reviews-section-btn-background: var(--c-grey-lightest);
  --reviews-section-btn-border: var(--c-grey-lighter);
  --reviews-section-btn-text: var(--c-dark-blue);

  /* Feature Section Buttons */
  --feature-section-button-background-color: var(--c-dark-blue);
  --feature-section-button-border-color: var(--c-dark-blue);
  --feature-section-button-text-color: var(--c-white);

  /* CTA example class */
  .cta {
    background-color: var(--c-dark-blue);
  }

  .top-section .inset-0 {
    background: rgba(0, 51, 115, 0.71) !important;
  }
}