body {
    font-family: var(--fd-font-body);
    background-color: var(--fd-body-bg);
    color: var(--fd-body-color);
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .title,
  .section-title,
  .product-title,
  .rd-navbar-brand,
  .breadcrumbs-custom-title {
    font-family: var(--fd-font-heading);
  }
  
  .font-accent,
  .text-accent,
  .brand-name,
  .brand-title,
  .quote-classic-text,
  .box-icon-classic-title {
    font-family: var(--fd-font-accent);
  }
  
  .top-panel,
  .top-header,
  .header-top,
  .rd-navbar-top-panel {
    background-color: var(--fd-top-bg) !important;
    color: var(--fd-top-color) !important;
  }
  
  .top-panel a,
  .top-header a,
  .header-top a,
  .rd-navbar-top-panel a {
    color: var(--fd-top-color) !important;
  }
  
  .rd-navbar,
  .rd-navbar-static,
  .rd-navbar-wrap,
  .rd-navbar-main {
    background-color: var(--fd-navbar-bg) !important;
    color: var(--fd-navbar-color) !important;
  }
  
  .rd-navbar-nav .rd-nav-link,
  .rd-navbar-static .rd-nav-link,
  .rd-navbar-modern .rd-nav-link {
    color: var(--fd-navbar-color) !important;
  }
  
  .rd-navbar-nav .rd-nav-item.active > .rd-nav-link,
  .rd-navbar-nav .rd-nav-link:hover,
  .rd-navbar-static .rd-nav-link:hover,
  .rd-navbar-dropdown .rd-dropdown-link:hover {
    color: var(--fd-navbar-active) !important;
  }
  
  .rd-navbar-dropdown {
    background-color: var(--fd-navbar-bg) !important;
  }
  
  .rd-navbar-dropdown .rd-dropdown-link {
    color: var(--fd-navbar-color) !important;
  }
  
  .button
  .button-primary,
  .btn-primary,
  .templateColor,
  .button.button-primary,
  .button.button-primary-outline:hover {
    background-color: var(--fd-primary-bg) !important;
    border-color: var(--fd-primary-bg) !important;
    color: var(--fd-primary-color) !important;
  }
  
  .button-primary:hover,
  .btn-primary:hover,
  .templateColor:hover {
    filter: brightness(0.92);
    color: var(--fd-primary-color) !important;
  }
  
  .button-secondary,
  .btn-secondary,
  .bg-secondary-custom {
    background-color: var(--fd-secondary-bg) !important;
    border-color: var(--fd-secondary-bg) !important;
    color: var(--fd-secondary-color) !important;
  }
  
  .text-primary,
  .text-primary-custom,
  .icon-primary,
  .link-primary,
  .box-icon-classic-icon,
  .product-price,
  .price {
    color: var(--fd-primary-bg) !important;
  }
  
  .bg-primary,
  .bg-primary-custom,
  .badge-primary {
    background-color: var(--fd-primary-bg) !important;
    color: var(--fd-primary-color) !important;
  }
  
  .bg-secondary,
  .bg-secondary-custom,
  .badge-secondary {
    background-color: var(--fd-secondary-bg) !important;
    color: var(--fd-secondary-color) !important;
  }
  
  .section,
  .bg-default {
    background-color: var(--fd-body-bg);
    color: var(--fd-body-color);
  }
  
  .card,
  .box,
  .product,
  .thumbnail,
  .post,
  .team-classic,
  .box-icon-classic {
    background-color: var(--fd-card-bg);
    color: var(--fd-card-color);
    border-color: var(--fd-card-border);
  }
  
  .card-title,
  .product-title,
  .post-title,
  .box-icon-classic-title {
    color: var(--fd-card-color);
  }
  
  .swiper-slide-caption,
  .section-main-bunner,
  .breadcrumbs-custom,
  .hero-section,
  .page-header,
  .main-banner {
    background-image:
      linear-gradient(var(--fd-hero-overlay), var(--fd-hero-overlay)),
      var(--fd-cover-url) !important;
    background-size: cover !important;
    background-position: center !important;
  }
  
  .swiper-slide-caption h1,
  .swiper-slide-caption h2,
  .section-main-bunner h1,
  .section-main-bunner h2,
  .breadcrumbs-custom-title,
  .hero-section h1,
  .hero-section h2 {
    color: var(--fd-hero-title) !important;
    font-family: var(--fd-font-heading);
  }
  
  .swiper-slide-caption p,
  .section-main-bunner p,
  .hero-section p {
    color: var(--fd-hero-subtitle) !important;
  }
  
  footer,
  .footer,
  .section-footer,
  .footer-classic,
  .footer-modern {
    background-color: var(--fd-footer-bg) !important;
    color: var(--fd-footer-color) !important;
  }
  
  footer a,
  .footer a,
  .section-footer a,
  .footer-classic a,
  .footer-modern a {
    color: var(--fd-footer-color) !important;
  }
  
  footer a:hover,
  .footer a:hover,
  .section-footer a:hover,
  .footer-classic a:hover,
  .footer-modern a:hover {
    color: var(--fd-primary-bg) !important;
  }
  
  .form-control:focus {
    border-color: var(--fd-primary-bg);
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--fd-primary-bg) 25%, transparent);
  }
  
  ::selection {
    background-color: var(--fd-primary-bg);
    color: var(--fd-primary-color);
  }