/* Icon System - SVG Icons with Customizable Colors */

/* Base Icon Styles */
.icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color-accent);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    vertical-align: middle;
  }

  .icon--inverted {
    background-color: var(--color-bg);
  }
  
  /* Icon Size Modifiers */
  .icon--xs {
    width: 1rem;
    height: 1rem;
  }
  
  .icon--sm {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .icon--md {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .icon--lg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .icon--xl {
    width: 3rem;
    height: 3rem;
  }

  .icon--2xl {
    width: 4rem;
    height: 4rem;
  }

  /* UI Icons */
  .icon--close {
    mask-image: url('../../public/img/icons/close.svg');
    -webkit-mask-image: url('../../public/img/icons/close.svg');
  }

  .icon--arrow-right {
    mask-image: url('../../public/img/icons/arrow-right.svg');
    -webkit-mask-image: url('../../public/img/icons/arrow-right.svg');
  }

  .icon--chevron-left {
    mask-image: url('../../public/img/icons/chevron-left.svg');
    -webkit-mask-image: url('../../public/img/icons/chevron-left.svg');
  }

  .icon--completed {
    mask-image: url('../../public/img/icons/completed.svg');
    -webkit-mask-image: url('../../public/img/icons/completed.svg');
  }

  .icon--sun {
    mask-image: url('../../public/img/icons/sun.svg');
    -webkit-mask-image: url('../../public/img/icons/sun.svg');
  }

  .icon--moon {
    mask-image: url('../../public/img/icons/moon.svg');
    -webkit-mask-image: url('../../public/img/icons/moon.svg');
  }

  .icon--start {
    mask-image: url('../../public/img/icons/start.svg');
    -webkit-mask-image: url('../../public/img/icons/start.svg');
  }

  .icon--calendar {
    mask-image: url('../../public/img/icons/calendar.svg');
    -webkit-mask-image: url('../../public/img/icons/calendar.svg');
  }

  .icon--services {
    mask-image: url('../../public/img/icons/services.svg');
    -webkit-mask-image: url('../../public/img/icons/services.svg');
  }

  .icon--customers {
    mask-image: url('../../public/img/icons/customers.svg');
    -webkit-mask-image: url('../../public/img/icons/customers.svg');
  }

  .icon--communication {
    mask-image: url('../../public/img/icons/communication.svg');
    -webkit-mask-image: url('../../public/img/icons/communication.svg');
  }

  .icon--security {
    mask-image: url('../../public/img/icons/security.svg');
    -webkit-mask-image: url('../../public/img/icons/security.svg');
  }

  .icon--double-check {
    mask-image: url('../../public/img/icons/double-check.svg');
    -webkit-mask-image: url('../../public/img/icons/double-check.svg');
  }

  .icon--add {
    mask-image: url('../../public/img/icons/add.svg');
    -webkit-mask-image: url('../../public/img/icons/add.svg');
  }

  .icon--help {
    mask-image: url('../../public/img/icons/help.svg');
    -webkit-mask-image: url('../../public/img/icons/help.svg');
  }

  .icon--roadmap {
    mask-image: url('../../public/img/icons/roadmap.svg');
    -webkit-mask-image: url('../../public/img/icons/roadmap.svg');
  }

  .icon--docs {
    mask-image: url('../../public/img/icons/docs.svg');
    -webkit-mask-image: url('../../public/img/icons/docs.svg');
  }

  /* Industry Icons */
  .icon--barber {
    mask-image: url('../../public/img/icons/barber.svg');
    -webkit-mask-image: url('../../public/img/icons/barber.svg');
  }

  .icon--coaching {
    mask-image: url('../../public/img/icons/coaching.svg');
    -webkit-mask-image: url('../../public/img/icons/coaching.svg');
  }

  .icon--healthcare {
    mask-image: url('../../public/img/icons/healthcare.svg');
    -webkit-mask-image: url('../../public/img/icons/healthcare.svg');
  }

  .icon--mobile {
    mask-image: url('../../public/img/icons/mobile.svg');
    -webkit-mask-image: url('../../public/img/icons/mobile.svg');
  }

  .icon--gym {
    mask-image: url('../../public/img/icons/gym.svg');
    -webkit-mask-image: url('../../public/img/icons/gym.svg');
  }

  /* Social Media Icons */
  .icon--facebook {
    mask-image: url('../../public/img/icons/facebook.svg');
    -webkit-mask-image: url('../../public/img/icons/facebook.svg');
  }

  .icon--instagram {
    mask-image: url('../../public/img/icons/instagram.svg');
    -webkit-mask-image: url('../../public/img/icons/instagram.svg');
  }

  .icon--linkedin {
    mask-image: url('../../public/img/icons/linkedin.svg');
    -webkit-mask-image: url('../../public/img/icons/linkedin.svg');
  }

  .icon--x {
    mask-image: url('../../public/img/icons/x.svg');
    -webkit-mask-image: url('../../public/img/icons/x.svg');
  }


    /* ==============================================
     Logo Component - Theme-aware PNG logos
     ============================================== */
     .logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    
      .logo__img {
        display: none;
        height: auto;
      }
    
      /* Size modifiers matching icon sizes */
      .logo--sm .logo__img {
        width: 1.25rem;
      }
    
      .logo--md .logo__img {
        width: 1.5rem;
      }
    
      .logo--lg .logo__img {
        width: 2rem;
      }
    
      /* Show light logo on dark theme */
      [data-theme="dark"] .logo__img--light,
      :root:not([data-theme]) .logo__img--light {
        display: block;
      }
    
      /* Show dark logo on light theme */
      [data-theme="light"] .logo__img--dark {
        display: block;
      }