/* Font Family */
/* .ff-playfair,
.ff-playfair.ff-force {
    font-family: "PlayfairDisplay", serif !important;
    font-optical-sizing: auto;
    font-style: normal;
    display: block;
}

.ff-opensans,
.ff-opensans.ff-force {
    font-family: "OpenSans", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
} */

/* Font Sizes */
.fs-40 {
    font-size: 40px !important;
    line-height: 50px !important;
}

.fs-32 {
    font-size: 32px !important;
    line-height: 42px !important;
}

.fs-24 {
    font-size: 24px !important;
    line-height: 34px !important;
}

.fs-22 {
    font-size: 22px !important;
    /* line-height: 30px !important; */
}

.fs-20 {
    font-size: 20px !important;
    /* line-height: 30px !important; */
}

.fs-18 {
    font-size: 18px !important;
    line-height: 28px !important;
}

.fs-16 {
    font-size: 16px !important;
    line-height: 26px !important;
}

.fs-14 {
    font-size: 14px !important;
    line-height: 24px !important;
}

.fs-13 {
    font-size: 13px !important;
    line-height: 23px !important;
}

.fs-12 {
    font-size: 12px !important;
    line-height: 22px !important;
}

/* Font Weights */
.fw-400 {
    font-weight: 400;
}

.fw-600 {
    font-weight: 600;
}

.fw-bold {
    font-weight: bold !important;
}

.fw-bolder {
    font-weight: bolder !important;
}

.fw-normal {
    font-weight: normal !important;
}

/* ─── Buttons ─────────────────────────────────────── */
.btn-emerald-600 {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-emerald-600);
    --bs-btn-border-color: var(--color-emerald-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-emerald-600) 92%, black 0%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-emerald-600) 92%, black 0%);
    --bs-btn-focus-shadow-rgb: 124, 134, 255;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--color-emerald-600) 92%, black 0%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-emerald-600) 92%, black 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-emerald-600);
    --bs-btn-disabled-border-color: var(--color-emerald-600);
}

.btn-emerald-600-outlined {
    --bs-btn-color: var(--color-emerald-600);
    --bs-btn-border-color: var(--color-emerald-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-emerald-600);
    --bs-btn-hover-border-color: var(--color-emerald-600);
    --bs-btn-focus-shadow-rgb: 101, 113, 255;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-emerald-600);
    --bs-btn-active-border-color: var(--color-emerald-600);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-emerald-600);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-emerald-600);
    --bs-gradient: none;
}

.btn-white {
    --bs-btn-color: var(--color-gray-900);
    --bs-btn-bg: white;
    --bs-btn-border-color: #e9ecef;
    --bs-btn-hover-color: var(--color-gray-900);
    --bs-btn-hover-bg: var(--color-gray-100);
    --bs-btn-hover-border-color: var(--color-gray-100);
    --bs-btn-focus-shadow-rgb: 198, 201, 203;
    --bs-btn-active-color: var(--color-gray-900);
    --bs-btn-active-bg: var(--color-gray-100);
    --bs-btn-active-border-color: var(--color-gray-500);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-gray-900);
    --bs-btn-disabled-bg: white;
    --bs-btn-disabled-border-color: white;
}

/* ─── Background ─────────────────────────────────────── */
.bg-emerald-600 {
    background-color: var(--color-emerald-600);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-base {
    background-color: var(--bs-card-cap-bg);
}

/* ─── Text ───────────────────────────────────────────── */
.text-emerald-600 {
    color: var(--color-emerald-600);
}

.text-emerald-50 {
    color: var(--color-emerald-50);
}

.text-gray-900 {
    color: var(--color-gray-900);
}

.text-gray-800 {
    color: var(--color-gray-800);
}

.text-gray-500 {
    color: var(--color-gray-500);
}

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

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

.text-red-800 {
    color: var(--color-red-800);
}

.text-red-100 {
    color: var(--color-red-100);
}

.text-yellow-800 {
    color: var(--color-yellow-800);
}

.text-yellow-100 {
    color: var(--color-yellow-100);
}

.text-blue-800 {
    color: var(--color-blue-800);
}

.text-blue-100 {
    color: var(--color-blue-100);
}

.text-green-800 {
    color: var(--color-green-800);
}

.text-green-600 {
    color: var(--color-green-600);
}

.text-green-100 {
    color: var(--color-green-100);
}

.text-purple-800 {
    color: var(--color-purple-800);
}

.text-purple-100 {
    color: var(--color-purple-100);
}

.text-orange-800 {
    color: var(--color-orange-800);
}

.text-orange-100 {
    color: var(--color-orange-100);
}

/* ─── Border ─────────────────────────────────────────── */
.border-emerald-600 {
    border: 1px solid var(--color-emerald-600);
}

.border-emerald-50 {
    border: 1px solid var(--color-emerald-50);
}

.border-gray-900 {
    border: 1px solid var(--color-gray-900);
}

.border-gray-800 {
    border: 1px solid var(--color-gray-800);
}

.border-gray-500 {
    border: 1px solid var(--color-gray-500);
}

.border-gray-300 {
    border: 1px solid var(--color-gray-300);
}

.border-gray-100 {
    border: 1px solid var(--color-gray-100);
}

.border-gray-50 {
    border: 1px solid var(--color-gray-50);
}

.border-red-800 {
    border: 1px solid var(--color-red-800);
}

.border-red-100 {
    border: 1px solid var(--color-red-100);
}

.border-yellow-800 {
    border: 1px solid var(--color-yellow-800);
}

.border-yellow-100 {
    border: 1px solid var(--color-yellow-100);
}

.border-blue-800 {
    border: 1px solid var(--color-blue-800);
}

.border-blue-100 {
    border: 1px solid var(--color-blue-100);
}

.border-green-800 {
    border: 1px solid var(--color-green-800);
}

.border-green-100 {
    border: 1px solid var(--color-green-100);
}

.border-purple-800 {
    border: 1px solid var(--color-purple-800);
}

.border-purple-100 {
    border: 1px solid var(--color-purple-100);
}

.border-orange-800 {
    border: 1px solid var(--color-orange-800);
}

.border-orange-100 {
    border: 1px solid var(--color-orange-100);
}

/* Badges */
.badge-blue {
    text-align: center;
    padding: 8px;
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
}

.badge-purple {
    text-align: center;
    padding: 8px;
    background-color: var(--color-purple-100);
    color: var(--color-purple-800);
}

.badge-red {
    text-align: center;
    padding: 8px;
    background-color: var(--color-red-100);
    color: var(--color-red-800);
}

.badge-orange {
    text-align: center;
    padding: 8px;
    background-color: var(--color-orange-100);
    color: var(--color-orange-800);
}

.badge-emerald {
    text-align: center;
    padding: 8px;
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-600);
}

.badge-green {
    text-align: center;
    padding: 8px;
    background-color: var(--color-green-100);
    color: var(--color-green-800);
}

.badge-yellow {
    text-align: center;
    padding: 8px;
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
}

.badge-yellow-lighter {
    text-align: center;
    padding: 8px;
    background-color: #FFFBEB;
    color: #92400E;
    border: 1px solid #FEF3C7;
}

.badge-mono {
    text-align: center;
    padding: 8px;
    background-color: var(--color-gray-50);
    color: var(--color-gray-800);
}

/* Border Radius */
.rounded-8 {
    border-radius: 8px;
}

.rounded-tl-none {
    border-top-left-radius: 0;
}

.rounded-t-8 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.rounded-b-8 {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.rounded-12 {
    border-radius: 12px !important;
}

.rounded-16 {
    border-radius: 16px !important;
}

.rounded-t-16 {
    border-radius: 16px 16px 0 0 !important;
}

.rounded-20 {
    border-radius: 20px;
}

.overflow-visible {
    overflow: visible !important;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-x-hidden,
.overflow-x-hidden.force {
    overflow-x: hidden !important;
}

/* Line Clamps */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    max-height: 4.5em;
}

.h-3-lines {
    height: 4.5em;
}

/* Others */
.min-h-screen {
    min-height: 100vh;
}

.placeholder {
    background-color: rgb(205, 205, 205) !important;
}

.user-select-none {
    user-select: none !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.text-decoration-none {
    text-decoration: none !important;
}

.ratio-square {
    aspect-ratio: 1/1 !important;
}

.grid-center {
    display: grid;
    place-content: center;
}

.vertical-align-middle {
    vertical-align: middle;
}

/* Mobile */
@media screen and (max-width: 767px) {
    .w-xs-100 {
        width: 100%;
    }

    /* Font Sizes */
    .fs-xs-40 {
        font-size: 40px !important;
        line-height: 50px !important;
    }

    .fs-xs-36 {
        font-size: 36px !important;
        line-height: 46px !important;
    }

    .fs-xs-32 {
        font-size: 32px !important;
        line-height: 42px !important;
    }

    .fs-xs-28 {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    .fs-xs-20 {
        font-size: 20px !important;
        line-height: 30px !important;
    }

    .fs-xs-18 {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    .fs-xs-14 {
        font-size: 14px !important;
        line-height: 22px !important;
    }
}

/* Mobile & Tablet */
@media screen and (max-width: 1023px) {
    .line-clamp-sm-4 {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .h-sm-3-lines {
        height: 4.5em;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .w-lg-75 {
        width: 75%;
    }

    .rasio-lg-square {
        aspect-ratio: 1/1 !important;
    }
}