:root {
  --c-black: #0f172a;
  --c-grey-darker: #1e293b;
  --c-grey-dark: #334155;
  --c-grey: #64748b;
  --c-grey-light: #cbd5f5;
  --c-grey-lighter: #e2e8f0;
  --c-grey-lightest: #f8fafc;
  --c-white: #ffffff;

  /* BRAND COLORS */
  --c-primary: #f8fafc;
  --c-action: #ff7420; /* keep for conversion */
  --c-brand: #23466b;
  --c-brand-dark: #1b3553;

  --c-background: #f8fafc;
  --c-pale-background: #f1f5f9;

  --c-text-dark: #0f172a;
  --c-text: #334155;
  --c-text-light: #ffffff;

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

  /* BUTTONS */
  --primary-button-background-color: var(--c-action);
  --primary-button-color: var(--c-white);
  --button-border-radius: 6px;

  --link: var(--c-brand);
  --link-hover: var(--c-brand-dark);
  --link-active: var(--c-brand-dark);

  /* NAVBAR */
  --nav-background-color: var(--c-brand);
  --nav-text-color: var(--c-white);
  --nav-button-background-color: var(--c-action);
  --nav-button-border-color: var(--c-action);
  --nav-button-text-color: var(--c-white);
  --nav-link-color: var(--c-white);
  --nav-shadow-color: rgba(0, 0, 0, 0.1);

  /* HERO */
  --hero-background-color: var(--c-primary);
  --hero-title-color: var(--c-brand);
  --hero-text-color: var(--c-grey-dark);
  --hero-button-background-color: var(--c-action);
  --hero-button-text-color: var(--c-white);

  --hero-secondary-button-text-color: var(--c-brand);
  --hero-secondary-button-border-color: var(--c-brand);

  /* SELLING POINTS BAR */
  --hero-benefits-background-color: var(--c-brand);
  --hero-benefits-text-color: var(--c-white);
  --hero-benefits-icon-color: var(--c-white);

  /* CALLOUT */
  --callout-background-color: var(--c-brand-dark);
  --callout-text-color: var(--c-white);

  /* FEATURES */
  --feature-section-button-background-color: var(--c-brand);
  --feature-section-button-border-color: var(--c-brand);
  --feature-section-button-text-color: var(--c-white);

  /* HOW IT WORKS */
  --how-it-works-background-color: var(--c-brand);
  --how-it-works-title-color: var(--c-white);
  --how-it-works-number-color: var(--c-action);
  --how-it-works-subtitle-color: var(--c-grey-light);
  --how-it-works-text-color: var(--c-white);

  /* REVIEWS */
  --review-section-star-icons: var(--c-action);
  --reviews-section-button-background: var(--c-grey-lightest);
  --reviews-section-button-border: var(--c-grey-lighter);
  --reviews-section-button-text: var(--c-brand);

  /* FOOTER CTA */
  --footer-banner-background-color: var(--c-brand);
  --footer-banner-title-color: var(--c-white);
  --footer-banner-text-color: var(--c-grey-lightest);
  --footer-banner-button-background-color: var(--c-white);
  --footer-banner-button-text-color: var(--c-brand);

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

  --border-color: rgba(15, 23, 42, 0.08);
}