@import url('styleGuide.css');


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

.corn-color {
    color: var(--corn-color);
}

.mystic-color {
    color: var(--mystic-color);
}

.madison-color {
    color: var(--madison-color);
}


/* ── Text colors ── */
.text-salem {
    color: var(--salem-color) !important;
}

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

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

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

/* ── Background colors ── */
.bg-salem {
    background-color: var(--salem-color) !important;
}

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

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

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

/* ── Subtle backgrounds ── */
.bg-salem-subtle {
    background-color: var(--salem-bg-subtle) !important;
}

.bg-corn-subtle {
    background-color: var(--corn-bg-subtle) !important;
}

.bg-mystic-subtle {
    background-color: var(--mystic-bg-subtle) !important;
}

.bg-madison-subtle {
    background-color: var(--madison-bg-subtle) !important;
}

/* ── Background + contrasting text (like btn-primary) ── */
.bg-salem-text {
    background-color: var(--salem-color);
    color: #fff !important;
}

.bg-corn-text {
    background-color: var(--corn-color);
    color: #000 !important;
}

.bg-mystic-text {
    background-color: var(--mystic-color);
    color: #000 !important;
}

.bg-madison-text {
    background-color: var(--madison-color);
    color: #fff !important;
}

/* ── Border colors ── */
.border-salem {
    border-color: var(--salem-color) !important;
}

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

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

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

/* ── Subtle border colors ── */
.border-salem-subtle {
    border-color: var(--salem-border-subtle) !important;
}

.border-corn-subtle {
    border-color: var(--corn-border-subtle) !important;
}

.border-mystic-subtle {
    border-color: var(--mystic-border-subtle) !important;
}

.border-madison-subtle {
    border-color: var(--madison-border-subtle) !important;
}

/* ── Link colors ── */
.link-salem {
    color: var(--salem-color) !important;
    text-decoration-color: var(--salem-color) !important;
}

.link-corn {
    color: var(--corn-color) !important;
    text-decoration-color: var(--corn-color) !important;
}

.link-mystic {
    color: var(--mystic-color) !important;
    text-decoration-color: var(--mystic-color) !important;
}

.link-madison {
    color: var(--madison-color) !important;
    text-decoration-color: var(--madison-color) !important;
}

/* ── Buttons (solid) ── */
.btn-salem {
    background-color: var(--salem-color);
    color: #fff;
    border-color: var(--salem-color);
}

    .btn-salem:hover {
        background-color: #096e48;
        border-color: #096e48;
        color: #fff;
    }

.btn-corn {
    background-color: var(--corn-color);
    color: #000;
    border-color: var(--corn-color);
}

    .btn-corn:hover {
        background-color: #c9a600;
        border-color: #c9a600;
        color: #000;
    }

.btn-mystic {
    background-color: var(--mystic-color);
    color: #000;
    border-color: var(--mystic-color);
}

    .btn-mystic:hover {
        background-color: #c8ccd9;
        border-color: #c8ccd9;
        color: #000;
    }

.btn-madison {
    background-color: var(--madison-color);
    color: #fff;
    border-color: var(--madison-color);
}

    .btn-madison:hover {
        background-color: #0c2555;
        border-color: #0c2555;
        color: #fff;
    }

/* ── Buttons (outline) ── */
.btn-outline-salem {
    color: var(--salem-color);
    border-color: var(--salem-color);
    background-color: transparent;
}

    .btn-outline-salem:hover {
        background-color: var(--salem-color);
        color: #fff;
    }

.btn-outline-corn {
    color: var(--corn-color);
    border-color: var(--corn-color);
    background-color: transparent;
}

    .btn-outline-corn:hover {
        background-color: var(--corn-color);
        color: #000;
    }

.btn-outline-mystic {
    color: var(--mystic-color);
    border-color: var(--mystic-color);
    background-color: transparent;
}

    .btn-outline-mystic:hover {
        background-color: var(--mystic-color);
        color: #000;
    }

.btn-outline-madison {
    color: var(--madison-color);
    border-color: var(--madison-color);
    background-color: transparent;
}

    .btn-outline-madison:hover {
        background-color: var(--madison-color);
        color: #fff;
    }

/* ── Badges ── */
.badge-salem {
    background-color: var(--salem-color);
    color: #fff;
}

.badge-corn {
    background-color: var(--corn-color);
    color: #000;
}

.badge-mystic {
    background-color: var(--mystic-color);
    color: #000;
}

.badge-madison {
    background-color: var(--madison-color);
    color: #fff;
}

/* ── Alerts ── */
.alert-salem {
    background-color: var(--salem-bg-subtle);
    border-color: var(--salem-border-subtle);
    color: #064a30;
}

.alert-corn {
    background-color: var(--corn-bg-subtle);
    border-color: var(--corn-border-subtle);
    color: #6b5500;
}

.alert-mystic {
    background-color: var(--mystic-bg-subtle);
    border-color: var(--mystic-border-subtle);
    color: #3a3f55;
}

.alert-madison {
    background-color: var(--madison-bg-subtle);
    border-color: var(--madison-border-subtle);
    color: #0a1f47;
}