:root {
    --color-accent--: rgba(216, 169, 4, 1);
    --color-sidebar-bg--: rgba(251, 250, 246, 1);
    --color-hover--: rgba(249, 242, 217, 1);
    --color-soft--: rgba(248, 244, 227, 1);
    --color-badge--: rgba(242, 226, 171, 1);
    --color-button-hover--: rgba(177, 139, 4, 1);
    --toggle-off--: rgba(242, 226, 171, 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(99%) saturate(1014%) hue-rotate(9deg) brightness(96%) contrast(97%);
  }
  
  .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--);
  }