/* Theme Minimal - 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: #f8f8f8;
  --theme-color-light-gray-2: #d9d9d9;
  --theme-color-light-gray-3: #bfbfbf;
  --theme-color-gray: #acadac;
  --theme-color-dark-gray: #696969;
  --theme-color-black: #484848;

  /* 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-1: color-mix(
    in srgb,
    var(--wft-primary-color) 10%,
    transparent
  );
  --theme-color-primary-opacity-2: color-mix(
    in srgb,
    var(--wft-primary-color) 30%,
    transparent
  );
  --theme-color-secondary-opacity: color-mix(
    in srgb,
    var(--wft-secondary-color) 10%,
    transparent
  );

  /* Button Hover Color Kit */
  --theme-color-primary-hover: ##344a9c;
  --theme-color-secondary-hover: ##d97430;
  --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: #84d844;
  --theme-color-info-toast: #00a0e4;
  --theme-color-warning-toast: #ffc451;
  --theme-color-danger-toast: #eb5e4c;
  --theme-color-success-toast-bg: #f3fbec;
  --theme-color-info-toast-bg: #e5f5fc;
  --theme-color-warning-toast-bg: #fff9ee;
  --theme-color-danger-toast-bg: #fdefed;

  /* Desktop Font Style */
  --theme-font-text-dt-xxl-size: 30px;
  --theme-font-text-dt-xxl-line-height: 45px;
  --theme-font-text-dt-xxl-weight: 500;
  --theme-font-text-dt-xl-size: 26px;
  --theme-font-text-dt-xl-line-height: 40px;
  --theme-font-text-dt-xl-weight: 500;
  --theme-font-text-dt-lg-size: 22px;
  --theme-font-text-dt-lg-line-height: 32px;
  --theme-font-text-dt-lg-weight: 500;
  --theme-font-text-dt-title-1-size: 26px;
  --theme-font-text-dt-title-1-line-height: 40px;
  --theme-font-text-dt-title-1-weight: 500;
  --theme-font-text-dt-title-2-size: 22px;
  --theme-font-text-dt-title-2-line-height: 32px;
  --theme-font-text-dt-title-2-weight: 500;
  --theme-font-text-dt-title-3-size: 20px;
  --theme-font-text-dt-title-3-line-height: 30px;
  --theme-font-text-dt-title-3-weight: 500;
  --theme-font-text-dt-title-4-size: 18px;
  --theme-font-text-dt-title-4-line-height: 28px;
  --theme-font-text-dt-title-4-weight: 500;
  --theme-font-text-dt-title-5-size: 16px;
  --theme-font-text-dt-title-5-line-height: 24px;
  --theme-font-text-dt-title-5-weight: 500;
  --theme-font-text-dt-title-6-size: 14px;
  --theme-font-text-dt-title-6-line-height: 20px;
  --theme-font-text-dt-title-6-weight: 500;
  --theme-font-text-dt-body-size: 16px;
  --theme-font-text-dt-body-line-height: 24px;
  --theme-font-text-dt-body-weight: 400;
  --theme-font-text-dt-body-small-size: 14px;
  --theme-font-text-dt-body-small-line-height: 20px;
  --theme-font-text-dt-body-small-weight: 400;
  --theme-font-text-dt-body-tiny-size: 12px;
  --theme-font-text-dt-body-tiny-line-height: 18px;
  --theme-font-text-dt-body-tiny-weight: 400;
  --theme-font-text-dt-link-size: 16px;
  --theme-font-text-dt-link-line-height: 24px;
  --theme-font-text-dt-link-weight: 400;
  --theme-font-text-dt-link-small-size: 14px;
  --theme-font-text-dt-link-small-line-height: 20px;
  --theme-font-text-dt-link-small-weight: 400;
  --theme-font-text-dt-button-size: 16px;
  --theme-font-text-dt-button-line-height: 24px;
  --theme-font-text-dt-button-weight: 400;

  /* Mobile Font Style */
  --theme-font-text-mb-xxl-size: 28px;
  --theme-font-text-mb-xxl-line-height: 42px;
  --theme-font-text-mb-xxl-weight: 500;
  --theme-font-text-mb-xl-size: 24px;
  --theme-font-text-mb-xl-line-height: 36px;
  --theme-font-text-mb-xl-weight: 500;
  --theme-font-text-mb-lg-size: 22px;
  --theme-font-text-mb-lg-line-height: 32px;
  --theme-font-text-mb-lg-weight: 500;
  --theme-font-text-mb-title-1-size: 24px;
  --theme-font-text-mb-title-1-line-height: 36px;
  --theme-font-text-mb-title-1-weight: 500;
  --theme-font-text-mb-title-2-size: 20px;
  --theme-font-text-mb-title-2-line-height: 30px;
  --theme-font-text-mb-title-2-weight: 500;
  --theme-font-text-mb-title-3-size: 18px;
  --theme-font-text-mb-title-3-line-height: 28px;
  --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: 20px;
  --theme-font-text-mb-title-5-weight: 500;
  --theme-font-text-mb-title-6-size: 12px;
  --theme-font-text-mb-title-6-line-height: 18px;
  --theme-font-text-mb-title-6-weight: 500;
  --theme-font-text-mb-body-size: 16px;
  --theme-font-text-mb-body-line-height: 24px;
  --theme-font-text-mb-body-weight: 400;
  --theme-font-text-mb-body-small-size: 14px;
  --theme-font-text-mb-body-small-line-height: 20px;
  --theme-font-text-mb-body-small-weight: 400;
  --theme-font-text-mb-body-tiny-size: 12px;
  --theme-font-text-mb-body-tiny-line-height: 18px;
  --theme-font-text-mb-body-tiny-weight: 400;
  --theme-font-text-mb-link-size: 16px;
  --theme-font-text-mb-link-line-height: 24px;
  --theme-font-text-mb-link-weight: 400;
  --theme-font-text-mb-link-small-size: 14px;
  --theme-font-text-mb-link-small-line-height: 20px;
  --theme-font-text-mb-link-small-weight: 400;
  --theme-font-text-mb-button-size: 16px;
  --theme-font-text-mb-button-line-height: 24px;
  --theme-font-text-mb-button-weight: 400;
}

/* Top Bar */
.fast-top-bar,
.fast-top-bar .q-field__native {
  color: var(--theme-color-dark-gray);
}

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

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

.fast-nav-dropdown-menu-border {
  background: var(--theme-color-primary);
}

.fast-nav-submenu-border {
  background: var(--theme-color-primary);
}

.fast-nav-submenu-bottom-bar {
  display: block !important;
}

/* Footer */
.fast-footer {
  background: var(--theme-color-light-gray-1) !important;
  color: var(--theme-color-dark-gray);
}

.fast-footer a:hover {
  color: var(--theme-color-primary);
}

.fast-footer .fast-footer-title {
  color: var(--theme-color-black);
}
/* Theme border radius */
.q-btn,
.q-btn::before,
.q-card,
.q-field--outlined .q-field__control,
.q-menu,
.q-dialog__inner > .q-card,
.q-banner,
.q-notification,
.q-badge {
  border-radius: 8px !important;
}