:root {
  // Custom variable values only support SassScript inside `#{}`.
  // @each $color, $value in $colors {
  //   --#{$variable-prefix}#{$color}: #{$value};
  // }

  // @each $color, $value in $theme-colors {
  //   --#{$variable-prefix}#{$color}: #{$value};
  // }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
  //--#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};

  --e-global-color-primary        : #DF5311; //21A46E //32ABC7 // 16BE99
  --e-global-color-secondary      : #138999;
  --e-global-color-third          : #FCB429;
  --e-global-color-text           : #768385;


  --#{$variable-prefix}link-color:      #144047;  
  --#{$variable-prefix}hover-color:     #DF5311; 
  --#{$variable-prefix}body-color:      #768385;
  --#{$variable-prefix}heading-color:   #144047;
  --#{$variable-prefix}heading-font-family: "Manrope", sans-serif; 

  --#{$variable-prefix}font-family-second: "Handlee", sans-serif; 

  --#{$variable-prefix}gradient: #{$gradient};

  --#{$variable-prefix}footer-bg-color:           #144047;
  --#{$variable-prefix}footer-color:              #8fa6aa; 
  --#{$variable-prefix}footer-color-link:         #8fa6aa;
  --#{$variable-prefix}footer-color-link-hover:   #DF5311; 

  --tec-font-family-sans-serif: var(--#{$variable-prefix}heading-font-family);
  --tec-color-accent-primary  : var(--e-global-color-primary);
  --tec-font-size-4: 16px;
  --tec-line-height-2: 28px;
  --tec-spacer-14: 60px;
  --tec-spacer-13: 60px;

  --give-color: var(--e-global-color-primary);
}