/*
============================================================
TEXT COLOR
============================================================
*/
.fc-text {
    color: var(--color-text);
}

.fc-util {
    color: var(--color-text-util);
}

.fc-weak {
    color: var(--color-text-weak);
}

.fc-inv {
    color: var(--color-text-inv);
}

.fc-primary {
    color: var(--primary);
}

.fc-secondary {
    color: var(--secondary);
}

.fc-blue {
    color: var(--accent-blue);
}

.fc-orange {
    color: var(--accent-orange);
}

.fc-pink {
    color: var(--accent-pink);
}

.fc-red {
    color: var(--color-red);
}

.fc-green {
    color: var(--color-green);
}

.fc-navy {
    color: var(--color-navy);
}

.fc-ok {
    color: var(--state-ok);
}

.fc-warn {
    color: var(--state-warn);
}

.fc-err {
    color: var(--state-err);
}

.fc-info {
    color: var(--state-info);
}

.fc-black,
.fc-blc {
    color: var(--color-black);
}

.fc-white,
.fc-wh {
    color: var(--color-white);
}

.fc-grd-gold {
    background-image: linear-gradient(135deg, #ebbf79, #ffefcf, #efc889, #e4a23e);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*
============================================================
BACKGROUND COLOR
============================================================
*/
.bg-white,
.bg-wh {
    background: var(--color-white);
}

.bg-black,
.bg-blc {
    background: var(--color-black);
}

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

.bg-dark {
    color: var(--color-text-inv);
    background: var(--color-bg-dark);
}

.bg-primary {
    color: var(--primary-contrast);
    background: var(--primary);
}

.bg-primary-soft {
    background: var(--primary-soft);
}

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

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

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

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

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

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

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

.bg-gray-50 {
    background: var(--color-gray-50);
}

.bg-gray-100 {
    background: var(--color-gray-100);
}

.bg-gray-200 {
    background: var(--color-gray-200);
}

/*
============================================================
BORDER COLOR
============================================================
*/
.bd {
    border: 1px solid var(--color-border);
}

.bd-strong {
    border: 1px solid var(--color-border-strong);
}

.bd-none {
    border: 0;
}

.bd-primary {
    border-color: var(--primary);
}

.bd-red {
    border-color: var(--color-red);
}

.bd-blue {
    border-color: var(--color-blue);
}

.bd-gray {
    border-color: var(--color-border);
}

/*
============================================================
OUTLINE TEXT
============================================================
*/
.white-outline,
.wh-outline {
    -webkit-text-stroke: 1px var(--color-white);
    -webkit-text-fill-color: transparent;
}

.primary-outline {
    -webkit-text-stroke: 1px var(--primary);
    -webkit-text-fill-color: transparent;
}

@media (prefers-contrast: more) {
    .fc-grd-gold {
        background-image: none;
        -webkit-text-fill-color: currentColor;
    }
}

@media (forced-colors: active) {
    .fc-grd-gold {
        background-image: none;
        -webkit-text-fill-color: currentColor;
    }
}