/* Theme Ecommerce - Variables */
:root {
  /** COLOR SECTION **/
  /* Primary Color Kit */
  --theme-color-primary: var(--wft-primary-color);
  --theme-color-secondary: var(--wft-secondary-color);

  /* Computed Primary Color Kit - True Inversion */
  --theme-color-inverted-primary: var(--wft-primary-text-color);
  --theme-color-inverted-secondary: var(--wft-secondary-text-color);

  /* Secondary Color Kit */
  --theme-color-white: #FFFFFF;
  --theme-color-light-gray-1: #F9FAFC;
  --theme-color-light-gray-2: #D9D9D9;
  --theme-color-light-gray-3: #BFBFBF;
  --theme-color-gray: #9D9D9D;
  --theme-color-dark-gray: #696969;
  --theme-color-black: #282828;

  /* Gradient Color Kit */
  --theme-color-primary-gradient: var(--wft-primary-color);
  --theme-color-secondary-gradient: var(--wft-secondary-color);

  /* Opacity Color Kit */
  --theme-color-primary-opacity: color-mix(in srgb, var(--wft-primary-color) 10%, transparent);
  --theme-color-secondary-opacity: color-mix(in srgb, var(--wft-secondary-color) 10%, transparent);or, #F5E5F9);

  /* Button Hover Color Kit */
  --theme-color-primary-hover: #000000;
  --theme-color-secondary-hover: #9B4FAE;
  --theme-color-success-hover: #6E9358;
  --theme-color-info-hover: #587393;
  --theme-color-warning-hover: #C69E52;
  --theme-color-danger-hover: #B87373;

  /* Shadow Color Kit */
  --theme-color-shadow-1: var(--wft-primary-color);
  --theme-color-shadow-2: var(--wft-secondary-color);

  /* Toast Color Kit */
  --theme-color-success-toast: #07B53B;
  --theme-color-info-toast: #2D72A7;
  --theme-color-warning-toast: #F8C40E;
  --theme-color-danger-toast: #F17575;
  --theme-color-success-toast-bg: #E6F8EB;
  --theme-color-info-toast-bg: #EAF1F6;
  --theme-color-warning-toast-bg: #FEF9E7;
  --theme-color-danger-toast-bg: #FAEEEF;

  /* Typography CSS Variables */
  
  /* Desktop Font Style */
  --theme-font-text-dt-title-1-size: 30px;
  --theme-font-text-dt-title-1-line-height: 48px;
  --theme-font-text-dt-title-1-weight: 500;
  --theme-font-text-dt-title-2-size: 24px;
  --theme-font-text-dt-title-2-line-height: 38px;
  --theme-font-text-dt-title-2-weight: 500;
  --theme-font-text-dt-title-3-size: 20px;
  --theme-font-text-dt-title-3-line-height: 32px;
  --theme-font-text-dt-title-3-weight: 500;
  --theme-font-text-dt-title-4-size: 18px;
  --theme-font-text-dt-title-4-line-height: 30px;
  --theme-font-text-dt-title-4-weight: 500;
  --theme-font-text-dt-title-5-size: 16px;
  --theme-font-text-dt-title-5-line-height: 28px;
  --theme-font-text-dt-title-5-weight: 500;
  --theme-font-text-dt-title-6-size: 14px;
  --theme-font-text-dt-title-6-line-height: 26px;
  --theme-font-text-dt-title-6-weight: 500;
  --theme-font-text-dt-body-size: 16px;
  --theme-font-text-dt-body-line-height: 28px;
  --theme-font-text-dt-body-weight: 400;
  --theme-font-text-dt-body-small-size: 14px;
  --theme-font-text-dt-body-small-line-height: 26px;
  --theme-font-text-dt-body-small-weight: 400;
  --theme-font-text-dt-body-tiny-size: 12px;
  --theme-font-text-dt-body-tiny-line-height: 20px;
  --theme-font-text-dt-body-tiny-weight: 400;
  --theme-font-text-dt-link-size: 16px;
  --theme-font-text-dt-link-line-height: 28px;
  --theme-font-text-dt-link-weight: 400;
  --theme-font-text-dt-link-small-size: 14px;
  --theme-font-text-dt-link-small-line-height: 26px;
  --theme-font-text-dt-link-small-weight: 400;
  --theme-font-text-dt-button-size: 16px;
  --theme-font-text-dt-button-line-height: 28px;
  --theme-font-text-dt-button-weight: 400;
  --theme-font-text-dt-button-small-size: 14px;
  --theme-font-text-dt-button-small-line-height: 22px;
  --theme-font-text-dt-button-small-weight: 400;
  
  /* Mobile Font Style */
  --theme-font-text-mb-title-1-size: 24px;
  --theme-font-text-mb-title-1-line-height: 32px;
  --theme-font-text-mb-title-1-weight: 500;
  --theme-font-text-mb-title-2-size: 20px;
  --theme-font-text-mb-title-2-line-height: 28px;
  --theme-font-text-mb-title-2-weight: 500;
  --theme-font-text-mb-title-3-size: 18px;
  --theme-font-text-mb-title-3-line-height: 26px;
  --theme-font-text-mb-title-3-weight: 500;
  --theme-font-text-mb-title-4-size: 16px;
  --theme-font-text-mb-title-4-line-height: 24px;
  --theme-font-text-mb-title-4-weight: 500;
  --theme-font-text-mb-title-5-size: 14px;
  --theme-font-text-mb-title-5-line-height: 22px;
  --theme-font-text-mb-title-5-weight: 500;
  --theme-font-text-mb-title-6-size: 12px;
  --theme-font-text-mb-title-6-line-height: 20px;
  --theme-font-text-mb-title-6-weight: 500;
  --theme-font-text-mb-body-size: 12px;
  --theme-font-text-mb-body-line-height: 20px;
  --theme-font-text-mb-body-weight: 400;
  --theme-font-text-mb-body-small-size: 14px;
  --theme-font-text-mb-body-small-line-height: 26px;
  --theme-font-text-mb-body-small-weight: 400;
  --theme-font-text-mb-body-tiny-size: 12px;
  --theme-font-text-mb-body-tiny-line-height: 20px;
  --theme-font-text-mb-body-tiny-weight: 400;
  --theme-font-text-mb-link-size: 16px;
  --theme-font-text-mb-link-line-height: 28px;
  --theme-font-text-mb-link-weight: 400;
  --theme-font-text-mb-link-small-size: 14px;
  --theme-font-text-mb-link-small-line-height: 26px;
  --theme-font-text-mb-link-small-weight: 400;
  --theme-font-text-mb-button-size: 14px;
  --theme-font-text-mb-button-line-height: 28px;
  --theme-font-text-mb-button-weight: 400;
  --theme-font-text-mb-button-small-size: 14px;
  --theme-font-text-mb-button-small-line-height: 22px;
  --theme-font-text-mb-button-small-weight: 400;
}

/* Top Bar */
.fast-top-bar,
.fast-top-bar .q-field__native,
.fast-top-bar .q-icon {
  background: var(--theme-color-primary);
  color: var(--theme-color-inverted-primary);
}

.fast-top-bar a:hover,
.fast-top-bar .q-field__native:hover,
.fast-top-bar .q-icon:hover
{
  color: var(--theme-color-secondary) !important;
}

/* Header */
.fast-header,
.fast-header i {
  background: var(--theme-color-white) !important;
  color: var(--theme-color-black);
}

.fast-header a {
  color: var(--theme-color-black);
}

.fast-top-bar a:hover,
.fast-header a:hover,
.fast-nav .menu-active a {
  color: var(--theme-color-primary);
}

.fast-dropdown-menu-border,
.fast-submenu-border {
  background: var(--theme-color-primary) !important;
}

/* Footer */
.fast-footer {
  background: var(--theme-color-primary) !important;
  color: var(--theme-color-inverted-primary);
}

.fast-footer a:hover {
  color: var(--theme-color-secondary) !important;
}