:root {
	--display-font-family: Lexend;
	--body-font-family: Lexend;

	--font-size: 15px

	--logo-padding: 29px;
	--logo-height: 250px;

	--header-width: 1366px;
	--header-border-position: bottom;
	--header-border-size: 0;
	--header-bg-color: 187 138 8;
	--header-border-color: 245 245 245;

	--brand-color: 187 138 8;
	--brand-color-inverted: 255 255 255;

	--background-color: 255 15 ;
	--text-color: 61 61 61;
	--link-color: 187 138 8;

	--action-color: 187 138 8;
	--action-color-inverted: 255 255 255;

	--announcement-bar-bg-color: 255 255 255;
	--announcement-bar-text-color: 187 138 8;
	--announcement-bar-link-color: 187 138 8;

	--main-navigation-bg-color: 187 138 8;
	--main-navigation-link-color: 255 255 255;
	--main-navigation-link-color-hover: 255 255 255;
	--main-navigation-link-bg-color: 255 255 255;
	--main-navigation-link-font-size: 15px;
	--main-navigation-link-alignment: center;

	--auxiliary-bg-color: transparent;
	--auxiliary-border-color: transparent;
	--auxiliary-link-color: 255 255 255;

	--order-status-bg-color: 255 255 255;
	--order-status-color: 187 138 8;

	--store-menu-bg_color: 255 255 255;
	--store-menu-color: 38 137 38;

	--footer-bg-color: 187 138 8;
	--footer-color: 255 255 255;
	--footer-link-color: 255 255 255;
}

/*Custom Styles*/
<button
  type="button"
  class="tw-inline-flex tw-items-center tw-gap-2
         tw-rounded-lg tw-px-4 tw-py-2
         tw-text-sm tw-font-semibold
         tw-text-white
         tw-bg-theme-link-color
         hover:tw-bg-theme-link-color/90
         active:tw-scale-95
         focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-theme-link-color/40
         tw-transition-all tw-duration-200"
>
  <!-- Plus Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" class="tw-h-4 tw-w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
  </svg>
  Add Card
</button>