/* Star Mystics Brand Styles
 *
 * Token roles:
 * - --brand-background-color → page / root fill
 * - --brand-primary-color → accent CTAs / mystic purple
 * - --header-bg → sticky nav + external nav strip
 * - --navbar-button-bg / --navbar-button-text → header NavButton pills
 * - --highlight-color → light purple accents
 */
:root {
    --brand-primary-color: #7c3aed;
    --brand-primary-color-dark: #6d28d9;
    --brand-background-color: #1a0b2e;
    --brand-secondary-background: #3b0764;
    --brand-text-color: #e2e8f0;
    --brand-login-background: #13071f;
    --brand-login-container-bg: #1a0b2e;
    --highlight-color: #c4b5fd;

    --header-bg: #441d4f;
    --header-text-color: #ffffff;
    --header-link-bg: rgba(255, 255, 255, 0.15);
    --header-link-hover-bg: #6d28d9;
    --header-btn-hover-text: #ffffff;
    --navbar-button-bg: var(--header-link-bg);
    --navbar-button-text: var(--header-text-color);

    --footer-bg: #13071f;
    --auth-page-bg: var(--brand-background-color);
    --auth-link-color: var(--highlight-color);
    --auth-submit-bg: var(--brand-primary-color);
    --auth-focus-color: var(--brand-primary-color);
    --error-logo-text-color: var(--highlight-color);
}

body {
    background-color: var(--brand-background-color, #1a0b2e);
    color: var(--brand-text-color, #e2e8f0);
}

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

.brand-primary-color {
    color: var(--brand-primary-color) !important;
}

.brand-primary-border {
    border-color: var(--brand-primary-color) !important;
}

.brand-secondary-bg {
    background-color: var(--brand-secondary-background);
}

.btn-brand-primary {
    background-color: var(--brand-primary-color);
    color: #ffffff;
    transition: background-color 0.3s ease;
}

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

.header-bg,
.navbar-brand,
.mystical-moon-nav {
    background-color: var(--header-bg, #441d4f);
}

.header-btn-bg,
.navbar-button-bg {
    background-color: var(--navbar-button-bg, var(--header-link-bg));
    color: var(--navbar-button-text, var(--header-text-color));
}

.header-btn-text,
.navbar-button-text {
    color: var(--navbar-button-text, var(--header-text-color));
}

.footer-bg {
    background-color: var(--footer-bg, var(--brand-background-color));
}

.login-img {
    background: var(--brand-login-background);
}

.login-container {
    background: var(--brand-login-container-bg);
}