:root { 
    --theme-color: #2c83dd;
    --theme-color-hover: #216db9;

    --theme-color-2: #2c83dd;
    --theme-color-2-hover: #216db9;

    --theme-color-3: #2c83dd;
    --theme-color-3-hover: #216db9;
}

/* Theme Color */
.color--theme { color: var(--theme-color); }
.bg--theme { background-color: var(--theme-color); }
.hover--theme:hover { background-color: var(--theme-color-hover); }
.btn--theme { background-color: var(--theme-color); }
.btn--theme:hover { background-color: var(--theme-color-hover); }

/* Theme Color 2 */
.color--theme-2 { color: var(--theme-color-2); }
.bg--theme-2 { background-color: var(--theme-color-2); }
.hover--theme-2:hover { background-color: var(--theme-color-2-hover); }
.btn--theme-2 { background-color: var(--theme-color-2); }
.btn--theme-2:hover { background-color: var(--theme-color-2-hover); }

/* Theme Color 3 */
.color--theme-3 { color: var(--theme-color-3); }
.bg--theme-3 { background-color: var(--theme-color-3); }
.hover--theme-3:hover { background-color: var(--theme-color-3-hover); }
.btn--theme-3 { background-color: var(--theme-color-3); }
.btn--theme-3:hover { background-color: var(--theme-color-3-hover); }

/* Border Colors */
.border--theme { border-color: var(--theme-color); }
.border--theme-2 { border-color: var(--theme-color-2); }
.border--theme-3 { border-color: var(--theme-color-3); }

/* Gradient Backgrounds */
.bg--theme-gradient {
    background: linear-gradient(to right, var(--theme-color), var(--theme-color-2));
}

/* Loading Animation */
.loading--theme .loader {
    border-color: transparent var(--theme-color);
}