<?php
 echo $primary = get_field('primary_color');
    $secondary =  get_field('secondary_color');
    $accent =  get_field('accent_color');
    $light =  get_field('light_text_color');
    $dark =  get_field('dark_text_color');
    $header_color = get_field('header_color');
    $sticky_nav_color= get_field('sticky_nav_color'); ?>

<style>
/* ================================= 
        Primary Color 
==================================== */
/* ----- Background Color Primary ----- */
.bg-primary,
.bg-primary-hover:hover,
.bg-primary-active.active {
  background-color: <?php echo  $primary; ?>;
}

/* ----- Text Color Primary ----- */
.text-color-primary,
.text-color-primary-hover:hover {
  color:<?php echo  $primary; ?>;
}

/* ----- Border Color Primary ----- */
.border-color-primary {
  border-color:<?php echo  $primary; ?>;
}

.bg-primary-hover a:hover {
  color:<?php echo  $primary; ?>;
}

/* =================================
            Secondary Color 
==================================== */
/* ----- Background Color Secondary ----- */
.bg-secondary,
.bg-secondary-hover:hover,
.active .bg-secondary-active {
  background-color: <?php echo  $secondary; ?>;
}

/* ----- Text Color Secondary ----- */
.text-color-secondary,
.text-color-secondary-hover:hover,
.active .text-color-secondary-active {
  color:<?php echo  $secondary; ?>;
}

/* ----- Border Color Secondary ----- */
.border-color-secondary {
  border-color: <?php echo  $secondary; ?>;
}

.bg-primary-hover a:hover {
    color:<?php echo  $primary; ?>;
}

/* =================================
        Accent Color 
==================================== */
/* ----- Background Color Accent ----- */
.bg-accent,
.bg-accent-hover:hover {
  background-color: <?php echo  $accent; ?>;
}

/* ----- Text Color Accent ----- */
.text-color-accent, .text-color-accent-hover:hover {
  color:<?php echo  $accent; ?>;;
}

/* ----- Border Color Accent ----- */
.border-color-accent {
  border-color:<?php echo  $accent; ?>;;
}

.bg-primary-hover a:hover {
    color:<?php echo  $primary; ?>;;
}

/* =================================
        Light Color 
==================================== */
/* ----- Background Color Light ----- */
.bg-light {
    background-color: #ffffff;
  }
  
  /* ----- Text Color Light ----- */
  .text-color-light,.text-color-light-active, .text-color-light-hover:hover {
    color: #ffffff;
  }
  
  /* ----- Border Color Light ----- */
  .border-color-light, .border-color-light-hover:hover {
    border-color: #ffffff;
  }

  /* =================================
        Dark Color 
==================================== */
/* ----- Background Color Dark ----- */
.bg-dark {
    background-color:<?php echo  $dark; ?>;;
  }
  
  /* ----- Text Color Dark ----- */
  .text-color-dark, .text-color-dark-hover:hover {
    color: #3C3C3C;
  }
  
  /* ----- Border Color Dark ----- */
  .border-color-dark, .border-color-dark-hover:hover {
    border-color: #3C3C3C;
  }

  /* =================================
        Buttons Styles 
==================================== */

    a.bg-light {
        border: 1.6px solid;
        border-color: #ffffff;
    
        &:hover {
        background-color: transparent;
        border-color: #ffffff;
        color: #ffffff;
        }
    }
  
    /* a.bg-secondary {
        color: #ffffff;
        border: 1.6px solid;
    
        &:hover {
        background-color: transparent;
        border-color: #52C7E8;
        }
    } */
    
    a.bg-dark{
        color: #ffffff;
        border: 1.6px solid;

        &:hover {
        background-color: #ffffff;
        border-color: #3C3C3C;
        color: #3C3C3C;
        }
    }</style>