:root {
    --action: #dc3384;
    --action-hover: #e25599;
    --action-ultra-light: #fef6fa;
    --action-light: #f4bed8;
    --action-medium: #da257c;
    --action-dark: #6d123e;
    --action-ultra-dark: #2c0719;
    --action-comp: #32dc8a;
    --primary: #997335;
    --primary-hover: #af833c;
    --primary-ultra-light: #f8f4ec;
    --primary-light: #ebddc6;
    --primary-medium: #be8e41;
    --primary-dark: #5f4721;
    --primary-ultra-dark: #261c0d;
    --primary-comp: #345a98;
    --secondary: #c74e79;
    --secondary-hover: #d16c8f;
    --secondary-ultra-light: #f9ecf0;
    --secondary-light: #edc5d3;
    --secondary-medium: #c23d6c;
    --secondary-dark: #611f36;
    --secondary-ultra-dark: #270c16;
    --secondary-comp: #4dc79c;
    --white: #fff;
    --black: #000;
    --shade: #000000;
    --action-trans-10: rgba(220, 50, 132, 0.1);
    --action-trans-20: rgba(220, 50, 132, 0.2);
    --action-trans-40: rgba(220, 50, 132, 0.4);
    --action-trans-60: rgba(220, 50, 132, 0.6);
    --action-trans-80: rgba(220, 50, 132, 0.8);
    --action-trans-90: rgba(220, 50, 132, 0.9);
    --action-ultra-dark-trans-10: rgba(44, 7, 25, 0.1);
    --action-ultra-dark-trans-20: rgba(44, 7, 25, 0.2);
    --action-ultra-dark-trans-40: rgba(44, 7, 25, 0.4);
    --action-ultra-dark-trans-60: rgba(44, 7, 25, 0.6);
    --action-ultra-dark-trans-80: rgba(44, 7, 25, 0.8);
    --action-ultra-dark-trans-90: rgba(44, 7, 25, 0.9);
    --action-light-trans-10: rgba(244, 190, 216, 0.1);
    --action-light-trans-20: rgba(244, 190, 216, 0.2);
    --action-light-trans-40: rgba(244, 190, 216, 0.4);
    --action-light-trans-60: rgba(244, 190, 216, 0.6);
    --action-light-trans-80: rgba(244, 190, 216, 0.8);
    --action-light-trans-90: rgba(244, 190, 216, 0.9);
    --primary-trans-10: rgba(152, 114, 52, 0.1);
    --primary-trans-20: rgba(152, 114, 52, 0.2);
    --primary-trans-40: rgba(152, 114, 52, 0.4);
    --primary-trans-60: rgba(152, 114, 52, 0.6);
    --primary-trans-80: rgba(152, 114, 52, 0.8);
    --primary-trans-90: rgba(152, 114, 52, 0.9);
    --primary-ultra-dark-trans-10: rgba(38, 28, 13, 0.1);
    --primary-ultra-dark-trans-20: rgba(38, 28, 13, 0.2);
    --primary-ultra-dark-trans-40: rgba(38, 28, 13, 0.4);
    --primary-ultra-dark-trans-60: rgba(38, 28, 13, 0.6);
    --primary-ultra-dark-trans-80: rgba(38, 28, 13, 0.8);
    --primary-ultra-dark-trans-90: rgba(38, 28, 13, 0.9);
    --primary-light-trans-10: rgba(235, 221, 198, 0.1);
    --primary-light-trans-20: rgba(235, 221, 198, 0.2);
    --primary-light-trans-40: rgba(235, 221, 198, 0.4);
    --primary-light-trans-60: rgba(235, 221, 198, 0.6);
    --primary-light-trans-80: rgba(235, 221, 198, 0.8);
    --primary-light-trans-90: rgba(235, 221, 198, 0.9);
    --secondary-trans-10: rgba(199, 77, 119, 0.1);
    --secondary-trans-20: rgba(199, 77, 119, 0.2);
    --secondary-trans-40: rgba(199, 77, 119, 0.4);
    --secondary-trans-60: rgba(199, 77, 119, 0.6);
    --secondary-trans-80: rgba(199, 77, 119, 0.8);
    --secondary-trans-90: rgba(199, 77, 119, 0.9);
    --secondary-ultra-dark-trans-10: rgba(39, 12, 22, 0.1);
    --secondary-ultra-dark-trans-20: rgba(39, 12, 22, 0.2);
    --secondary-ultra-dark-trans-40: rgba(39, 12, 22, 0.4);
    --secondary-ultra-dark-trans-60: rgba(39, 12, 22, 0.6);
    --secondary-ultra-dark-trans-80: rgba(39, 12, 22, 0.8);
    --secondary-ultra-dark-trans-90: rgba(39, 12, 22, 0.9);
    --secondary-light-trans-10: rgba(237, 197, 211, 0.1);
    --secondary-light-trans-20: rgba(237, 197, 211, 0.2);
    --secondary-light-trans-40: rgba(237, 197, 211, 0.4);
    --secondary-light-trans-60: rgba(237, 197, 211, 0.6);
    --secondary-light-trans-80: rgba(237, 197, 211, 0.8);
    --secondary-light-trans-90: rgba(237, 197, 211, 0.9);


}
.bg--action {
    background-color: #dc3384
}

.bg--action-hover {
    background-color: #e25599
}

.bg--action-ultra-light {
    background-color: #fef6fa
}

.bg--action-light {
    background-color: #f4bed8
}

.bg--action-medium {
    background-color: #da257c
}

.bg--action-dark {
    background-color: #6d123e
}

.bg--action-ultra-dark {
    background-color: #2c0719
}

.bg--action-comp {
    background-color: #32dc8a
}

.bg--primary {
    background-color: #997335
}

.bg--primary-hover {
    background-color: #af833c
}

.bg--primary-ultra-light {
    background-color: #f8f4ec
}

.bg--primary-light {
    background-color: #ebddc6
}

.bg--primary-medium {
    background-color: #be8e41
}

.bg--primary-dark {
    background-color: #5f4721
}

.bg--primary-ultra-dark {
    background-color: #261c0d
}

.bg--primary-comp {
    background-color: #345a98
}

.bg--secondary {
    background-color: #c74e79
}

.bg--secondary-hover {
    background-color: #d16c8f
}

.bg--secondary-ultra-light {
    background-color: #f9ecf0
}

.bg--secondary-light {
    background-color: #edc5d3
}

.bg--secondary-medium {
    background-color: #c23d6c
}

.bg--secondary-dark {
    background-color: #611f36
}

.bg--secondary-ultra-dark {
    background-color: #270c16
}

.bg--secondary-comp {
    background-color: #4dc79c
}

.bg--accent {
    background-color: #e8be01
}

.bg--accent-hover {
    background-color: #fed210
}

.bg--accent-ultra-light {
    background-color: #fffae6
}

.bg--accent-light {
    background-color: #fff1b3
}

.bg--accent-medium {
    background-color: #fecf01
}

.bg--accent-dark {
    background-color: #7f6801
}

.bg--accent-ultra-dark {
    background-color: #332900
}

.bg--accent-comp {
    background-color: #012ce9
}
.bg--action-trans-10 {
    background-color: rgba(220, 50, 132, .1)
}

.bg--action-trans-20 {
    background-color: rgba(220, 50, 132, .2)
}

.bg--action-trans-40 {
    background-color: rgba(220, 50, 132, .4)
}

.bg--action-trans-60 {
    background-color: rgba(220, 50, 132, .6)
}

.bg--action-trans-80 {
    background-color: rgba(220, 50, 132, .8)
}

.bg--action-trans-90 {
    background-color: rgba(220, 50, 132, .9)
}

.bg--action-ultra-dark-trans-10 {
    background-color: rgba(44, 7, 25, .1)
}

.bg--action-ultra-dark-trans-20 {
    background-color: rgba(44, 7, 25, .2)
}

.bg--action-ultra-dark-trans-40 {
    background-color: rgba(44, 7, 25, .4)
}

.bg--action-ultra-dark-trans-60 {
    background-color: rgba(44, 7, 25, .6)
}

.bg--action-ultra-dark-trans-80 {
    background-color: rgba(44, 7, 25, .8)
}

.bg--action-ultra-dark-trans-90 {
    background-color: rgba(44, 7, 25, .9)
}

.bg--action-light-trans-10 {
    background-color: rgba(244, 190, 216, .1)
}

.bg--action-light-trans-20 {
    background-color: rgba(244, 190, 216, .2)
}

.bg--action-light-trans-40 {
    background-color: rgba(244, 190, 216, .4)
}

.bg--action-light-trans-60 {
    background-color: rgba(244, 190, 216, .6)
}

.bg--action-light-trans-80 {
    background-color: rgba(244, 190, 216, .8)
}

.bg--action-light-trans-90 {
    background-color: rgba(244, 190, 216, .9)
}

.bg--primary-trans-10 {
    background-color: rgba(152, 114, 52, .1)
}

.bg--primary-trans-20 {
    background-color: rgba(152, 114, 52, .2)
}

.bg--primary-trans-40 {
    background-color: rgba(152, 114, 52, .4)
}

.bg--primary-trans-60 {
    background-color: rgba(152, 114, 52, .6)
}

.bg--primary-trans-80 {
    background-color: rgba(152, 114, 52, .8)
}

.bg--primary-trans-90 {
    background-color: rgba(152, 114, 52, .9)
}

.bg--primary-ultra-dark-trans-10 {
    background-color: rgba(38, 28, 13, .1)
}

.bg--primary-ultra-dark-trans-20 {
    background-color: rgba(38, 28, 13, .2)
}

.bg--primary-ultra-dark-trans-40 {
    background-color: rgba(38, 28, 13, .4)
}

.bg--primary-ultra-dark-trans-60 {
    background-color: rgba(38, 28, 13, .6)
}

.bg--primary-ultra-dark-trans-80 {
    background-color: rgba(38, 28, 13, .8)
}

.bg--primary-ultra-dark-trans-90 {
    background-color: rgba(38, 28, 13, .9)
}

.bg--primary-light-trans-10 {
    background-color: rgba(235, 221, 198, .1)
}

.bg--primary-light-trans-20 {
    background-color: rgba(235, 221, 198, .2)
}

.bg--primary-light-trans-40 {
    background-color: rgba(235, 221, 198, .4)
}

.bg--primary-light-trans-60 {
    background-color: rgba(235, 221, 198, .6)
}

.bg--primary-light-trans-80 {
    background-color: rgba(235, 221, 198, .8)
}

.bg--primary-light-trans-90 {
    background-color: rgba(235, 221, 198, .9)
}

.bg--secondary-trans-10 {
    background-color: rgba(199, 77, 119, .1)
}

.bg--secondary-trans-20 {
    background-color: rgba(199, 77, 119, .2)
}

.bg--secondary-trans-40 {
    background-color: rgba(199, 77, 119, .4)
}

.bg--secondary-trans-60 {
    background-color: rgba(199, 77, 119, .6)
}

.bg--secondary-trans-80 {
    background-color: rgba(199, 77, 119, .8)
}

.bg--secondary-trans-90 {
    background-color: rgba(199, 77, 119, .9)
}

.bg--secondary-ultra-dark-trans-10 {
    background-color: rgba(39, 12, 22, .1)
}

.bg--secondary-ultra-dark-trans-20 {
    background-color: rgba(39, 12, 22, .2)
}

.bg--secondary-ultra-dark-trans-40 {
    background-color: rgba(39, 12, 22, .4)
}

.bg--secondary-ultra-dark-trans-60 {
    background-color: rgba(39, 12, 22, .6)
}

.bg--secondary-ultra-dark-trans-80 {
    background-color: rgba(39, 12, 22, .8)
}

.bg--secondary-ultra-dark-trans-90 {
    background-color: rgba(39, 12, 22, .9)
}

.bg--secondary-light-trans-10 {
    background-color: rgba(237, 197, 211, .1)
}

.bg--secondary-light-trans-20 {
    background-color: rgba(237, 197, 211, .2)
}

.bg--secondary-light-trans-40 {
    background-color: rgba(237, 197, 211, .4)
}

.bg--secondary-light-trans-60 {
    background-color: rgba(237, 197, 211, .6)
}

.bg--secondary-light-trans-80 {
    background-color: rgba(237, 197, 211, .8)
}

.bg--secondary-light-trans-90 {
    background-color: rgba(237, 197, 211, .9)
}