:root {
    --color-black: #1f1f1f;
    --color-local: #ED6D00;
    --color-main: #EFFCFF;

    --color-tokai: #ED6D00;
    --color-white: #ffffff;
}

:root {
    --color-sub1: #3d6eb2;
    --color-sub2: #c30119;
    --color-sub3: #63a745;
    --color-sub4: #531f80;
    --color-sub5: #f1d14e;
    --color-sub6: #c31b70;
}

/* Sub5 Color Styles */
.sub5-bg {
    background: var(--color-sub5);
}

.sub5-gradient {
    background: linear-gradient(to top, var(--color-sub5), #fff 50%, #fff 100%);
}

.sub5-border {
    border: 1px solid var(--color-sub5);
}

.sub5-text {
    color: var(--color-sub5) !important;
}

/* Sub6 Color Styles */
.sub6-bg {
    background: var(--color-sub6);
}

.sub6-gradient {
    background: linear-gradient(to top, var(--color-sub6), #fff 50%, #fff 100%);
}

.sub6-border {
    border: 1px solid var(--color-sub6);
}

.sub6-text {
    color: var(--color-sub6) !important;
}


/* Main Color Styles */
.main-bg {
    background: var(--color-main);
}

.main-gradient {
    background: linear-gradient(to top, var(--color-main), #fff 50%, #fff 100%);
}

.main-border {
    border: 1px solid var(--color-main);
    background: var(--color-white);
}

.main-text {
    color: var(--color-main) !important;
}

/* Sub Color Styles */
.sub1-bg {
    background: var(--color-sub1);
}

.sub1-gradient {
    background: linear-gradient(to top, var(--color-sub1), #fff 50%, #fff 100%);
}

.sub1-border {
    border: 1px solid var(--color-sub1);
}

.sub1-text {
    color: var(--color-sub1) !important;
}

/* Sub2 Color Styles */
.sub2-bg {
    background: var(--color-sub2);
}

.sub2-gradient {
    background: linear-gradient(to top, var(--color-sub2), #fff 50%, #fff 100%);
}

.sub2-border {
    border: 1px solid var(--color-sub2);
}

.sub2-text {
    color: var(--color-sub2) !important;
}

/* Sub3 Color Styles */
.sub3-bg {
    background: var(--color-sub3);
}

.sub3-gradient {
    background: linear-gradient(to top, var(--color-sub3), #fff 50%, #fff 100%);
}

.sub3-border {
    border: 1px solid var(--color-sub3);
}

.sub3-text {
    color: var(--color-sub3) !important;
}

/* Sub4 Color Styles */
.sub4-bg {
    background: var(--color-sub4);
}

.sub4-gradient {
    background: linear-gradient(to top, var(--color-sub4), #fff 50%, #fff 100%);
}

.sub4-border {
    border: 1px solid var(--color-sub4);
}

.sub4-text {
    color: var(--color-sub4) !important;
}

/* Tokai Color Styles */
.tokai-bg {
    background: var(--color-tokai);
}

.tokai-border {
    border: 1px solid var(--color-tokai);
}

.tokai-text {
    color: var(--color-tokai);
}

/* Local Color Styles */
.local-bg {
    background: var(--color-local);
}

.local-border {
    border: 1px solid var(--color-local);
}

.local-text {
    color: var(--color-local);
}

/* Black Color Styles */
.black-bg {
    background: var(--color-black);
}

.black-border {
    border: 1px solid var(--color-black);
}

.black-text {
    color: var(--color-black);
}

/* White Color Styles */
.white-bg {
    background: var(--color-white);
}

.white-border {
    border: 1px solid var(--color-white);
}

.white-text {
    color: var(--color-white);
}