@import url('styleGuide.css');


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

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

.lotus-color {
    color: var(--basalt-color);
}

.basalt-color {
    color: var(--lotus-color);
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn-basalt {
    background-color: var(--lotus-color);
    color: #fff;
    border-color: var(--lotus-color);
    transition: all 0.1s ease-in-out;
}

    .btn-basalt:hover {
        background-color: #fff;
        border-color: var(--lotus-color);
        color: var(--lotus-color);
        transition: all 0.1s ease-in-out;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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