/* Primary Colors */
:root {
    --exr-primary-color: #615EFC; /* Primary color */
    --exr-primary-color-light: #7E8EF1; /* Light variant of primary color */
    --exr-primary-color-dark: #4A48D3; /* Dark variant of primary color */
    
    --exr-secondary-color: #7E8EF1; /* Secondary color */
    --exr-secondary-color-light: #A6B1F9; /* Light variant of secondary color */
    --exr-secondary-color-dark: #636ECB; /* Dark variant of secondary color */

    --exr-background-color: #EEEEEE; /* Background color */
    --exr-background-color-alt: #D1D8C5; /* Alternate background color */

    --exr-text-color: #212121; /* Primary text color */
    --exr-text-color-light: #757575; /* Light text color */
    --exr-text-color-dark: #000000; /* Dark text color */
    --exr-border-color-dark: #75abe1; /* Dark text color */
    --exr-border-color-light: #8d98a2; /* Dark text color */
    --exr-star-rating-dark: #FFD700; /* Dark text color */
}
/* Utility Classes for Backgrounds */
.exr-bg-primary {
    background-color: var(--exr-primary-color) !important;
}

.exr-star-rating {
    color: var(--exr-star-rating-dark) !important;
}
.exr-bg-secondary {
    background-color: var(--exr-secondary-color) !important;
}

.exr-bg-light {
    background-color: var(--exr-background-color) !important;
}

.exr-bg-light-alt {
    background-color: var(--exr-background-color-alt) !important;
}

.exr-bg-dark {
    background-color: var(--exr-primary-color-dark) !important;
}

/* Utility Classes for Text Colors */
.exr-text-primary {
    color: var(--exr-primary-color) !important;
}

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

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

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

/* Border Styles */
.exr-border-primary {
    color: var(--exr-border-color-dark) !important;
}

.exr-border-light {
    color: var(--exr-border-color-light) !important;
}

/* Button Styles */
.exr-btn-primary {
    background-color: var(--exr-primary-color);
    border-color: var(--exr-primary-color);
    color: var(--exr-background-color);
}

.exr-btn-primary:hover {
    background-color: var(--exr-primary-color-dark);
    border-color: var(--exr-primary-color-dark);
    color: var(--exr-background-color);
}

.exr-btn-secondary {
    background-color: var(--exr-secondary-color);
    border-color: var(--exr-secondary-color);
    color: var(--exr-background-color);
}

.exr-btn-secondary:hover {
    background-color: var(--exr-secondary-color-dark);
    border-color: var(--exr-secondary-color-dark);
    color: var(--exr-background-color);
}

/* Link Styles */
a.exr-link {
    color: var(--exr-primary-color);
    text-decoration: none;
}

a.exr-link:hover, a.exr-link:focus {
    color: var(--exr-primary-color-dark);
    text-decoration: underline;
}

/* Example Usage */
/* body {
    background-color: var(--exr-background-color);
    color: var(--exr-text-color);
}

header, footer {
    background-color: var(--exr-primary-color-dark);
    color: var(--exr-background-color);
}

.navbar {
    background-color: var(--exr-primary-color);
}

.navbar a {
    color: var(--exr-background-color);
} */