:root {
    --color-accent--: rgba(214, 98, 98, 1);
    --color-sidebar-bg--: rgba(251, 246, 246, 1);
    --color-hover--: rgba(249, 232, 232, 1);
    --color-soft--: rgba(248, 229, 227, 1);
    --color-badge--: rgba(241, 202, 202, 1);
    --color-button-hover--: rgb(185, 60, 60);
    --toggle-off--: rgba(241, 203, 203, 1);
    --filter-accent--: invert(64%) sepia(72%) saturate(316%) hue-rotate(156deg) brightness(81%) contrast(94%);
    --filter-subtitle--: invert(88%) sepia(13%) saturate(160%) hue-rotate(183deg) brightness(84%) contrast(84%);
    --filter-white--: invert(100%) sepia(0%) saturate(7476%) hue-rotate(110deg) brightness(98%) contrast(108%);
  }
  
  .iconcolor {
    filter: invert(60%) sepia(53%) saturate(3017%) hue-rotate(322deg) brightness(94%) contrast(77%);
  }
  
  .iconcolor-white {
    filter: invert(100%) sepia(0%) saturate(18%) hue-rotate(16deg) brightness(106%) contrast(106%);
  }
  
  .iconcolor-green {
    filter: invert(52%) sepia(30%) saturate(3993%) hue-rotate(119deg) brightness(93%) contrast(99%);
  }
  
  .iconcolor-grey {
    filter: invert(46%) sepia(10%) saturate(613%) hue-rotate(175deg) brightness(94%) contrast(87%);
  }
  
  .iconcolor-red {
    filter: invert(25%) sepia(59%) saturate(4470%) hue-rotate(343deg) brightness(113%) contrast(103%);
  }
  
  .iconcolor-badge {
    filter: invert(79%) sepia(53%) saturate(91%) hue-rotate(153deg) brightness(100%) contrast(94%);
  }
  
  .iconcolor-subtitle {
    filter: var(--filter-subtitle--);
  }
  
  /* Icon color hover */
  
  .iconcolor-hover-accent:hover {
    filter: var(--filter-accent--);
  }