:root {
   /* primary (orange) */
   --color-orange-90t: #FEF0E9;
   --color-orange-80t: #FCE0D3;
   --color-orange-70t: #FBD1BC;
   --color-orange-60t: #F9C1A6;
   --color-orange-50t: #F8B290;
   --color-orange-40t: #F7A37A;
   --color-orange-30t: #F59364;
   --color-orange-20t: #F4844D;
   --color-orange-10t: #F27437;
   --color-orange-0  : #F16521;
   --color-primary-0 : #F16521;
   --color-orange-10s: #d95b1e;
   --color-orange-20s: #c1511a;
   --color-orange-30s: #a94717;
   --color-orange-40s: #913d14;
   --color-orange-50s: #793311;
   --color-orange-60s: #60280d;
   --color-orange-70s: #481e0a;
   --color-orange-80s: #301407;
   --color-orange-90s: #180a03;
   
   /* secondary (brown) */
   --color-brown-90t: #F5EDE9;
   --color-brown-80t: #EBDAD3;
   --color-brown-70t: #E0C8BD;
   --color-brown-60t: #D6B5A7;
   --color-brown-50t: #CCA392;
   --color-brown-40t: #C2907C;
   --color-brown-30t: #B87E66;
   --color-brown-20t: #AD6B50;
   --color-brown-10t: #A3593A;
   --color-brown-0  : #994624;
   --color-secondary-0: #994624;
   --color-brown-10s: #8a3f20;
   --color-brown-20s: #7a381d;
   --color-brown-30s: #6b3119;
   --color-brown-40s: #5c2a16;
   --color-brown-50s: #4d2312;
   --color-brown-60s: #3d1c0e;
   --color-brown-70s: #2e150b;
   --color-brown-80s: #1f0e07;
   --color-brown-90s: #0f0704;

   /* tertiary (leaf) */
   --color-leaf-90t: #f4f9ec;
   --color-leaf-80t: #e8f4d8;
   --color-leaf-70t: #ddeec5;
   --color-leaf-60t: #d1e8b2;
   --color-leaf-50t: #c6e39f;
   --color-leaf-40t: #badd8b;
   --color-leaf-30t: #afd778;
   --color-leaf-20t: #a3d165;
   --color-leaf-10t: #98cc51;
   --color-leaf-0  : #8CC63E;
   --color-tertiary-0: #8CC63E;
   --color-leaf-10s: #7eb238;
   --color-leaf-20s: #709e32;
   --color-leaf-30s: #628b2b;
   --color-leaf-40s: #547725;
   --color-leaf-50s: #46631f;
   --color-leaf-60s: #384f19;
   --color-leaf-70s: #2a3b13;
   --color-leaf-80s: #1c280c;
   --color-leaf-90s: #0e1406;

   /* quaternary (blue) */  
   --color-blue-90t: #e6f4ff; 
   --color-blue-80t: #cdeafe; 
   --color-blue-70t: #b3dffe; 
   --color-blue-60t: #9ad4fe; 
   --color-blue-50t: #81cafe; 
   --color-blue-40t: #68bffd; 
   --color-blue-30t: #4fb4fd; 
   --color-blue-20t: #35a9fd; 
   --color-blue-10t: #1c9ffc; 
   --color-blue-0  : #0394FC;
   --color-quaternary-0: #0394FC;
   --color-blue-10s: #0385e3;
   --color-blue-20s: #0276ca;
   --color-blue-30s: #0268b0;
   --color-blue-40s: #025997;
   --color-blue-50s: #024a7e;
   --color-blue-60s: #013b65;
   --color-blue-70s: #012c4c;
   --color-blue-80s: #011e32;
   --color-blue-90s: #000f19;

   /* others */
   --color-red-0: #ff0000;
   --color-yellowish-orange-0: #fcba03;

   --color-purple-20t: #993399;
   --color-purple-0: #800080;
}

.filter_primary,
.filter_orange {
   /* orange */
   filter: brightness(0) saturate(100%) invert(69%) sepia(66%) saturate(6502%) hue-rotate(350deg) brightness(99%) contrast(90%);
}
.filter_primary-20s {
   /* #c1511a */
   filter: brightness(0) saturate(100%) invert(33%) sepia(63%) saturate(1422%) hue-rotate(352deg) brightness(96%) contrast(89%);
}


.filter_secondary, 
.filter_brown {   
   /* brown*/
   filter: brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(5089%) hue-rotate(341deg) brightness(93%) contrast(87%);   
}
.filter_secondary-20s {   
   /* 7a381d*/
   filter: brightness(0) saturate(100%) invert(22%) sepia(72%) saturate(713%) hue-rotate(336deg) brightness(97%) contrast(91%);
}


.filter_tertiary,
.filter_leaf {
   /* leaf green */
   filter: brightness(0) saturate(100%) invert(68%) sepia(13%) saturate(1821%) hue-rotate(44deg) brightness(101%) contrast(92%);
}
.filter_tertiary-20s {
   /* 709e32 */
   filter: brightness(0) saturate(100%) invert(52%) sepia(84%) saturate(357%) hue-rotate(43deg) brightness(91%) contrast(84%);
}

.filter_quaternary,
.filter_blue {
   /* blue */
   filter: brightness(0) saturate(100%) invert(65%) sepia(59%) saturate(7497%) hue-rotate(182deg) brightness(100%) contrast(102%);
}
.filter_quaternary-20s {
   /* 0276ca */
   filter: brightness(0) saturate(100%) invert(28%) sepia(90%) saturate(1529%) hue-rotate(185deg) brightness(96%) contrast(98%);
}


.filter_green {
   /* Green #008000 */
   filter: brightness(0) saturate(100%) invert(22%) sepia(100%) saturate(3480%) hue-rotate(114deg) brightness(91%) contrast(104%);
}
.filter_red {
   /* #ff0000 */
   filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(5448%) hue-rotate(358deg) brightness(114%) contrast(124%);
}
.filter_yellowish_orange {
   /* #fcba03 */
   filter: brightness(0) saturate(100%) invert(67%) sepia(70%) saturate(1431%) hue-rotate(1deg) brightness(105%) contrast(98%);
}
.filter_purple--20t {
   /* purple 20% tint */
   filter: brightness(0) saturate(100%) invert(23%) sepia(22%) saturate(6088%) hue-rotate(277deg) brightness(102%) contrast(86%);
}