:root {
  --c-black: #1a1919;
  --c-grey-darker: #1a1919;
  --c-grey-dark: #62646f;
  --c-grey: #7e7e7e;
  --c-grey-light: #cacaca;
  --c-grey-lighter: #dde0e5;
  --c-grey-lightest: #f8f8f8;
  --c-white: #ffffff;

  --c-primary: #ffff00;
  --c-action: #2c5fce;
  --c-background: var(--c-grey-lightest);
  --c-positive: #0bb148;
  --c-negative: #ca2727;
  --c-pale-background: #FFF7CC;

  --c-text-dark: var(--c-black);
  --c-text: var(--c-grey-dark);
  --c-text-light: var(--c-white);
  --hero-background-color: var(--c-primary);
  --hero-title-color: var(--c-text-dark);
  --hero-text-color: var(--c-text-dark);

  --hero-benefits-background-color: var(--c-black);
  --hero-benefits-text-color: var(--c-white);
  --hero-benefits-title-color: var(--c-white);
  --hero-benefits-link-color: var(--c-white);

    --hero-button-background-color: var(--c-primary);
    --hero-button-border-color: var(--c-black);
    --hero-button-text-color: var(--c-black);

  --nav-background-color: var(--c-primary);
  --nav-text-color: var(--c-text-dark);

  --footer-background-color: var(--c-black);
  --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-primary);
  --primary-button-color: var(--c-black);

  --nav-button-border-color: var(--c-black);
  --nav-button-text-color: var(--c-white);
  --nav-button-background-color: var(--c-black);

  --nav-link-color: var(--c-black);
  --nav-shadow-color: var(--c-primary);
  --callout-background-color: var(--c-black);
  --callout-text-color: var(--c-white);
    --calcumate-icon: var(--c-primary);



    --border-color: var(--grey-lighter);

    --c-icon: var(--c-action);

    --info-bar-background-color: var(--c-black);
    --info-bar-announce-background-color: var(--c-action);
    --info-bar-announce-text-color: var(--c-white);
    --info-bar-text-color: var(--c-white);
    --info-bar-link-color:  var(--c-white);

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

    --nav-button-background-color: var(--c-black);
    --nav-button-border-color: var(--c-black);
    --nav-button-text-color: var(--c-white);

    --hero-benefits-icon-color: var(--c-white);

    --c-sidebar-selling-point-icon: var(--c-icon);

    --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-action);

    --footer-banner-background-color: var(--c-action);
    --footer-banner-title-color: var(--c-white);
    --footer-banner-text-color: var(--c-white);
    --footer-banner-button-background-color: var(--c-white);
    --footer-banner-button-text-color: var(--c-action);

    --c-summary-review-star-icons: var(--c-icon);


}