:root {
    --primary: #AFFF49;
    --primary-filter: brightness(0%) saturate(100%) invert(100%) sepia(82%) saturate(1493%) hue-rotate(27deg) brightness(97%) contrast(112%);
    --primary-hover: #8FDA30;
    --primary-hover-filter: brightness(0%) saturate(100%) invert(90%) sepia(18%) saturate(1842%) hue-rotate(29deg) brightness(95%) contrast(80%);
    --secondary: #2C364D;
    --secondary-filter: brightness(0) saturate(100%) invert(17%) sepia(11%) saturate(2376%) hue-rotate(184deg) brightness(89%) contrast(83%);
    --secondary-hover: #1F283E;
    --secondary-hover-filter: brightness(0) saturate(100%) invert(13%) sepia(40%) saturate(711%) hue-rotate(185deg) brightness(90%) contrast(92%);
    --tertiary: #EEF2F7;
    --tertiary-hover: #DFEAF8;
    --primary-grey: #F1F0F0;
    /* --primary-grey-filter: */
    --secondary-grey: #B0B1B2;
    --secondary-grey-filter: brightness(0%) saturate(100%) invert(81%) sepia(5%) saturate(55%) hue-rotate(169deg) brightness(87%) contrast(93%);
    --custom-red: #EB5757;
    --custom-red-filter: brightness(0) saturate(100%) invert(42%) sepia(50%) saturate(2369%) hue-rotate(331deg) brightness(105%) contrast(84%);
    --red-hover: #CA3C3C;
    --red-hover-filter: brightness(0) saturate(100%) invert(30%) sepia(30%) saturate(1473%) hue-rotate(314deg) brightness(114%) contrast(109%);
    --custom-orange: #FFBA03;
    --custom-orange-filter: brightness(0) saturate(100%) invert(17%) sepia(11%) saturate(2376%) hue-rotate(184deg) brightness(89%) contrast(83%);
    --orange-hover: #EDAE00;
}