:root {
    --blue: #0d6efd; /* رنگ آبی */
    --blue-100: #cfe2ff;
    --blue-200: #a8c8ff;
    --blue-300: #7faaff;
    --blue-400: #4da3ff;
    --blue-500: #0095ff;
    --blue-600: #0080e0;
    --blue-700: #0070c1;
    --blue-800: #005ba1;
    --blue-900: #004281;

    --indigo: #6610f2; /* رنگ بنفش */
    --indigo-100: #d5c5ff;
    --indigo-200: #b2a3ff;
    --indigo-300: #8f81ff;
    --indigo-400: #6a63ff;
    --indigo-500: #4c49ff;
    --indigo-600: #3833cc;
    --indigo-700: #2626a6;
    --indigo-800: #1a1a80;
    --indigo-900: #101050;

    --purple: #6f42c1; /* رنگ بنفش */
    --purple-100: #e9d6f5;
    --purple-200: #d6b5e0;
    --purple-300: #c493cc;
    --purple-400: #b371b8;
    --purple-500: #a051a2;
    --purple-600: #8b3f87;
    --purple-700: #6c2e6d;
    --purple-800: #5c2360;
    --purple-900: #4a1d52;

    --pink: #d63384; /* رنگ صورتی */
    --pink-100: #f1c2d9;
    --pink-200: #e8a6c3;
    --pink-300: #df8aaf;
    --pink-400: #d66f9e;
    --pink-500: #d2568e;
    --pink-600: #c2437f;
    --pink-700: #b23573;
    --pink-800: #a42868;
    --pink-900: #921c5b;

    --red: #dc3545; /* رنگ قرمز */
    --red-100: #f8d7da;
    --red-200: #f5b2b5;
    --red-300: #f09999;
    --red-400: #ed7f7f;
    --red-500: #eb5d5d;
    --red-600: #d64c4c;
    --red-700: #c14343;
    --red-800: #a63535;
    --red-900: #8a2828;

    --orange: #fd7e14; /* رنگ نارنجی */
    --orange-100: #ffe6d0;
    --orange-200: #ffd1a1;
    --orange-300: #ffb274;
    --orange-400: #ff9d47;
    --orange-500: #ff8721;
    --orange-600: #e0731c;
    --orange-700: #c0671a;
    --orange-800: #a05417;
    --orange-900: #8e4a13;

    --yellow: #ffc107; /* رنگ زرد */
    --yellow-100: #fff3cd;
    --yellow-200: #ffe69b;
    --yellow-300: #ffdb6d;
    --yellow-400: #ffcf3f;
    --yellow-500: #ffbd00;
    --yellow-600: #e0a700;
    --yellow-700: #c69300;
    --yellow-800: #aa7e00;
    --yellow-900: #8a6800;

    --green: #198754; /* رنگ سبز */
    --green-100: #c3e6cb;
    --green-200: #a6d8a2;
    --green-300: #8cd69b;
    --green-400: #70c686;
    --green-500: #55bc72;
    --green-600: #47a063;
    --green-700: #389251;
    --green-800: #2c7c43;
    --green-900: #1f6537;

    --teal: #20c997; /* رنگ فیروزه‌ای */
    --teal-100: #d1f5e3;
    --teal-200: #a6ebcc;
    --teal-300: #7cd9b1;
    --teal-400: #54c89b;
    --teal-500: #38b68e;
    --teal-600: #2ea06e;
    --teal-700: #248857;
    --teal-800: #1c6e4a;
    --teal-900: #155f3e;

    --cyan: #0dcaf0; /* رنگ آبی فیروزه‌ای */
    --cyan-100: #b2efff;
    --cyan-200: #99e3ff;
    --cyan-300: #7ed7ff;
    --cyan-400: #65d0ff;
    --cyan-500: #4cc5ff;
    --cyan-600: #43a6e6;
    --cyan-700: #3a8abf;
    --cyan-800: #31709a;
    --cyan-900: #2a597e;

    --gray-100: #f8f9fa; /* رنگ خاکستری روشن */
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    --black: #000; /* رنگ سیاه */
    --white: #fff; /* رنگ سفید */
}
/* کلاس‌های پس‌زمینه */
.bg-indigo {
    background-color: var(--indigo) !important; /* استفاده از رنگ بنفش */
}

.bg-indigo-100 {
    background-color: var(--indigo-100) !important; /* استفاده از رنگ بنفش ۱۰۰ */
}

.bg-indigo-200 {
    background-color: var(--indigo-200) !important; /* استفاده از رنگ بنفش ۲۰۰ */
}

.bg-indigo-300 {
    background-color: var(--indigo-300) !important; /* استفاده از رنگ بنفش ۳۰۰ */
}

.bg-indigo-400 {
    background-color: var(--indigo-400) !important; /* استفاده از رنگ بنفش ۴۰۰ */
}

.bg-indigo-500 {
    background-color: var(--indigo-500) !important; /* استفاده از رنگ بنفش ۵۰۰ */
}

.bg-indigo-600 {
    background-color: var(--indigo-600) !important; /* استفاده از رنگ بنفش ۶۰۰ */
}

.bg-indigo-700 {
    background-color: var(--indigo-700) !important; /* استفاده از رنگ بنفش ۷۰۰ */
}

.bg-indigo-800 {
    background-color: var(--indigo-800) !important; /* استفاده از رنگ بنفش ۸۰۰ */
}

.bg-indigo-900 {
    background-color: var(--indigo-900) !important; /* استفاده از رنگ بنفش ۹۰۰ */
}
/* کلاس‌های متنی */
.text-indigo {
    color: var(--indigo) !important; /* استفاده از رنگ بنفش */
}

.text-indigo-100 {
    color: var(--indigo-100) !important; /* استفاده از رنگ بنفش ۱۰۰ */
}

.text-indigo-200 {
    color: var(--indigo-200) !important; /* استفاده از رنگ بنفش ۲۰۰ */
}

.text-indigo-300 {
    color: var(--indigo-300) !important; /* استفاده از رنگ بنفش ۳۰۰ */
}

.text-indigo-400 {
    color: var(--indigo-400) !important; /* استفاده از رنگ بنفش ۴۰۰ */
}

.text-indigo-500 {
    color: var(--indigo-500) !important; /* استفاده از رنگ بنفش ۵۰۰ */
}

.text-indigo-600 {
    color: var(--indigo-600) !important; /* استفاده از رنگ بنفش ۶۰۰ */
}

.text-indigo-700 {
    color: var(--indigo-700) !important; /* استفاده از رنگ بنفش ۷۰۰ */
}

.text-indigo-800 {
    color: var(--indigo-800) !important; /* استفاده از رنگ بنفش ۸۰۰ */
}

.text-indigo-900 {
    color: var(--indigo-900) !important; /* استفاده از رنگ بنفش ۹۰۰ */
}



.bg-blue {
    background-color: var(--blue) !important; /* استفاده از رنگ آبی */
}

.bg-blue-100 {
    background-color: var(--blue-100) !important; /* استفاده از رنگ آبی ۱۰۰ */
}

.bg-blue-200 {
    background-color: var(--blue-200) !important; /* استفاده از رنگ آبی ۲۰۰ */
}

.bg-blue-300 {
    background-color: var(--blue-300) !important; /* استفاده از رنگ آبی ۳۰۰ */
}

.bg-blue-400 {
    background-color: var(--blue-400) !important; /* استفاده از رنگ آبی ۴۰۰ */
}

.bg-blue-500 {
    background-color: var(--blue-500) !important; /* استفاده از رنگ آبی ۵۰۰ */
}

.bg-blue-600 {
    background-color: var(--blue-600) !important; /* استفاده از رنگ آبی ۶۰۰ */
}

.bg-blue-700 {
    background-color: var(--blue-700) !important; /* استفاده از رنگ آبی ۷۰۰ */
}

.bg-blue-800 {
    background-color: var(--blue-800) !important; /* استفاده از رنگ آبی ۸۰۰ */
}

.bg-blue-900 {
    background-color: var(--blue-900) !important; /* استفاده از رنگ آبی ۹۰۰ */
}

/* کلاس‌های متنی */
.text-blue {
    color: var(--blue) !important; /* استفاده از رنگ آبی */
}

.text-blue-100 {
    color: var(--blue-100) !important; /* استفاده از رنگ آبی ۱۰۰ */
}

.text-blue-200 {
    color: var(--blue-200) !important; /* استفاده از رنگ آبی ۲۰۰ */
}

.text-blue-300 {
    color: var(--blue-300) !important; /* استفاده از رنگ آبی ۳۰۰ */
}

.text-blue-400 {
    color: var(--blue-400) !important; /* استفاده از رنگ آبی ۴۰۰ */
}

.text-blue-500 {
    color: var(--blue-500) !important; /* استفاده از رنگ آبی ۵۰۰ */
}

.text-blue-600 {
    color: var(--blue-600) !important; /* استفاده از رنگ آبی ۶۰۰ */
}

.text-blue-700 {
    color: var(--blue-700) !important; /* استفاده از رنگ آبی ۷۰۰ */
}

.text-blue-800 {
    color: var(--blue-800) !important; /* استفاده از رنگ آبی ۸۰۰ */
}

.text-blue-900 {
    color: var(--blue-900) !important; /* استفاده از رنگ آبی ۹۰۰ */
}

/* کلاس‌های سفارشی */
.bg-purple {
    background-color: var(--purple) !important; /* استفاده از رنگ بنفش */
}

.bg-purple-100 {
    background-color: var(--purple-100) !important; /* استفاده از رنگ بنفش ۱۰۰ */
}

.bg-purple-200 {
    background-color: var(--purple-200) !important; /* استفاده از رنگ بنفش ۲۰۰ */
}

.bg-purple-300 {
    background-color: var(--purple-300) !important; /* استفاده از رنگ بنفش ۳۰۰ */
}

.bg-purple-400 {
    background-color: var(--purple-400) !important; /* استفاده از رنگ بنفش ۴۰۰ */
}

.bg-purple-500 {
    background-color: var(--purple-500) !important; /* استفاده از رنگ بنفش ۵۰۰ */
}

.bg-purple-600 {
    background-color: var(--purple-600) !important; /* استفاده از رنگ بنفش ۶۰۰ */
}

.bg-purple-700 {
    background-color: var(--purple-700) !important; /* استفاده از رنگ بنفش ۷۰۰ */
}

.bg-purple-800 {
    background-color: var(--purple-800) !important; /* استفاده از رنگ بنفش ۸۰۰ */
}

.bg-purple-900 {
    background-color: var(--purple-900) !important; /* استفاده از رنگ بنفش ۹۰۰ */
}

/* کلاس‌های متنی */
.text-purple {
    color: var(--purple) !important; /* استفاده از رنگ بنفش */
}

.text-purple-100 {
    color: var(--purple-100) !important; /* استفاده از رنگ بنفش ۱۰۰ */
}

.text-purple-200 {
    color: var(--purple-200) !important; /* استفاده از رنگ بنفش ۲۰۰ */
}

.text-purple-300 {
    color: var(--purple-300) !important; /* استفاده از رنگ بنفش ۳۰۰ */
}

.text-purple-400 {
    color: var(--purple-400) !important; /* استفاده از رنگ بنفش ۴۰۰ */
}

.text-purple-500 {
    color: var(--purple-500) !important; /* استفاده از رنگ بنفش ۵۰۰ */
}

.text-purple-600 {
    color: var(--purple-600) !important; /* استفاده از رنگ بنفش ۶۰۰ */
}

.text-purple-700 {
    color: var(--purple-700) !important; /* استفاده از رنگ بنفش ۷۰۰ */
}

.text-purple-800 {
    color: var(--purple-800) !important; /* استفاده از رنگ بنفش ۸۰۰ */
}

.text-purple-900 {
    color: var(--purple-900) !important; /* استفاده از رنگ بنفش ۹۰۰ */
}

/* کلاس‌های سفارشی */
.bg-pink {
    background-color: var(--pink) !important; /* استفاده از رنگ صورتی */
}

.bg-pink-100 {
    background-color: var(--pink-100) !important; /* استفاده از رنگ صورتی ۱۰۰ */
}

.bg-pink-200 {
    background-color: var(--pink-200) !important; /* استفاده از رنگ صورتی ۲۰۰ */
}

.bg-pink-300 {
    background-color: var(--pink-300) !important; /* استفاده از رنگ صورتی ۳۰۰ */
}

.bg-pink-400 {
    background-color: var(--pink-400) !important; /* استفاده از رنگ صورتی ۴۰۰ */
}

.bg-pink-500 {
    background-color: var(--pink-500) !important; /* استفاده از رنگ صورتی ۵۰۰ */
}

.bg-pink-600 {
    background-color: var(--pink-600) !important; /* استفاده از رنگ صورتی ۶۰۰ */
}

.bg-pink-700 {
    background-color: var(--pink-700) !important; /* استفاده از رنگ صورتی ۷۰۰ */
}

.bg-pink-800 {
    background-color: var(--pink-800) !important; /* استفاده از رنگ صورتی ۸۰۰ */
}

.bg-pink-900 {
    background-color: var(--pink-900) !important; /* استفاده از رنگ صورتی ۹۰۰ */
}

/* کلاس‌های متنی */
.text-pink {
    color: var(--pink) !important; /* استفاده از رنگ صورتی */
}

.text-pink-100 {
    color: var(--pink-100) !important; /* استفاده از رنگ صورتی ۱۰۰ */
}

.text-pink-200 {
    color: var(--pink-200) !important; /* استفاده از رنگ صورتی ۲۰۰ */
}

.text-pink-300 {
    color: var(--pink-300) !important; /* استفاده از رنگ صورتی ۳۰۰ */
}

.text-pink-400 {
    color: var(--pink-400) !important; /* استفاده از رنگ صورتی ۴۰۰ */
}
.text-pink-500 {
    color: var(--pink-500) !important; /* استفاده از رنگ صورتی ۵۰۰ */
}

.text-pink-600 {
    color: var(--pink-600) !important; /* استفاده از رنگ صورتی ۶۰۰ */
}

.text-pink-700 {
    color: var(--pink-700) !important; /* استفاده از رنگ صورتی ۷۰۰ */
}

.text-pink-800 {
    color: var(--pink-800) !important; /* استفاده از رنگ صورتی ۸۰۰ */
}

.text-pink-900 {
    color: var(--pink-900) !important; /* استفاده از رنگ صورتی ۹۰۰ */
}

/* کلاس‌های سفارشی */
.bg-red {
    background-color: var(--red) !important; /* استفاده از رنگ قرمز */
}

.bg-red-100 {
    background-color: var(--red-100) !important; /* استفاده از رنگ قرمز ۱۰۰ */
}

.bg-red-200 {
    background-color: var(--red-200) !important; /* استفاده از رنگ قرمز ۲۰۰ */
}

.bg-red-300 {
    background-color: var(--red-300) !important; /* استفاده از رنگ قرمز ۳۰۰ */
}

.bg-red-400 {
    background-color: var(--red-400) !important; /* استفاده از رنگ قرمز ۴۰۰ */
}

.bg-red-500 {
    background-color: var(--red-500) !important; /* استفاده از رنگ قرمز ۵۰۰ */
}

.bg-red-600 {
    background-color: var(--red-600) !important; /* استفاده از رنگ قرمز ۶۰۰ */
}

.bg-red-700 {
    background-color: var(--red-700) !important; /* استفاده از رنگ قرمز ۷۰۰ */
}

.bg-red-800 {
    background-color: var(--red-800) !important; /* استفاده از رنگ قرمز ۸۰۰ */
}

.bg-red-900 {
    background-color: var(--red-900) !important; /* استفاده از رنگ قرمز ۹۰۰ */
}

/* کلاس‌های متنی */
.text-red {
    color: var(--red) !important; /* استفاده از رنگ قرمز */
}

.text-red-100 {
    color: var(--red-100) !important; /* استفاده از رنگ قرمز ۱۰۰ */
}

.text-red-200 {
    color: var(--red-200) !important; /* استفاده از رنگ قرمز ۲۰۰ */
}

.text-red-300 {
    color: var(--red-300) !important; /* استفاده از رنگ قرمز ۳۰۰ */
}

.text-red-400 {
    color: var(--red-400) !important; /* استفاده از رنگ قرمز ۴۰۰ */
}

.text-red-500 {
    color: var(--red-500) !important; /* استفاده از رنگ قرمز ۵۰۰ */
}

.text-red-600 {
    color: var(--red-600) !important; /* استفاده از رنگ قرمز ۶۰۰ */
}

.text-red-700 {
    color: var(--red-700) !important; /* استفاده از رنگ قرمز ۷۰۰ */
}

.text-red-800 {
    color: var(--red-800) !important; /* استفاده از رنگ قرمز ۸۰۰ */
}

.text-red-900 {
    color: var(--red-900) !important; /* استفاده از رنگ قرمز ۹۰۰ */
}



/* کلاس‌های سفارشی */
.bg-orange {
    background-color: var(--orange) !important; /* استفاده از رنگ نارنجی */
}

.bg-orange-100 {
    background-color: var(--orange-100) !important; /* استفاده از رنگ نارنجی ۱۰۰ */
}

.bg-orange-200 {
    background-color: var(--orange-200) !important; /* استفاده از رنگ نارنجی ۲۰۰ */
}

.bg-orange-300 {
    background-color: var(--orange-300) !important; /* استفاده از رنگ نارنجی ۳۰۰ */
}

.bg-orange-400 {
    background-color: var(--orange-400) !important; /* استفاده از رنگ نارنجی ۴۰۰ */
}

.bg-orange-500 {
    background-color: var(--orange-500) !important; /* استفاده از رنگ نارنجی ۵۰۰ */
}

.bg-orange-600 {
    background-color: var(--orange-600) !important; /* استفاده از رنگ نارنجی ۶۰۰ */
}

.bg-orange-700 {
    background-color: var(--orange-700) !important; /* استفاده از رنگ نارنجی ۷۰۰ */
}

.bg-orange-800 {
    background-color: var(--orange-800) !important; /* استفاده از رنگ نارنجی ۸۰۰ */
}

.bg-orange-900 {
    background-color: var(--orange-900) !important; /* استفاده از رنگ نارنجی ۹۰۰ */
}

/* کلاس‌های متنی */
.text-orange {
    color: var(--orange) !important; /* استفاده از رنگ نارنجی */
}

.text-orange-100 {
    color: var(--orange-100) !important; /* استفاده از رنگ نارنجی ۱۰۰ */
}

.text-orange-200 {
    color: var(--orange-200) !important; /* استفاده از رنگ نارنجی ۲۰۰ */
}

.text-orange-300 {
    color: var(--orange-300) !important; /* استفاده از رنگ نارنجی ۳۰۰ */
}

.text-orange-400 {
    color: var(--orange-400) !important; /* استفاده از رنگ نارنجی ۴۰۰ */
}

.text-orange-500 {
    color: var(--orange-500) !important; /* استفاده از رنگ نارنجی ۵۰۰ */
}

.text-orange-600 {
    color: var(--orange-600) !important; /* استفاده از رنگ نارنجی ۶۰۰ */
}

.text-orange-700 {
    color: var(--orange-700) !important; /* استفاده از رنگ نارنجی ۷۰۰ */
}

.text-orange-800 {
    color: var(--orange-800) !important; /* استفاده از رنگ نارنجی ۸۰۰ */
}

.text-orange-900 {
    color: var(--orange-900) !important; /* استفاده از رنگ نارنجی ۹۰۰ */
}

/* کلاس‌های سفارشی */
.bg-yellow {
    background-color: var(--yellow) !important; /* استفاده از رنگ زرد */
}

.bg-yellow-100 {
    background-color: var(--yellow-100) !important; /* استفاده از رنگ زرد ۱۰۰ */
}

.bg-yellow-200 {
    background-color: var(--yellow-200) !important; /* استفاده از رنگ زرد ۲۰۰ */
}

.bg-yellow-300 {
    background-color: var(--yellow-300) !important; /* استفاده از رنگ زرد ۳۰۰ */
}

.bg-yellow-400 {
    background-color: var(--yellow-400) !important; /* استفاده از رنگ زرد ۴۰۰ */
}

.bg-yellow-500 {
    background-color: var(--yellow-500) !important; /* استفاده از رنگ زرد ۵۰۰ */
}

.bg-yellow-600 {
    background-color: var(--yellow-600) !important; /* استفاده از رنگ زرد ۶۰۰ */
}

.bg-yellow-700 {
    background-color: var(--yellow-700) !important; /* استفاده از رنگ زرد ۷۰۰ */
}

.bg-yellow-800 {
    background-color: var(--yellow-800) !important; /* استفاده از رنگ زرد ۸۰۰ */
}

.bg-yellow-900 {
    background-color: var(--yellow-900) !important; /* استفاده از رنگ زرد ۹۰۰ */
}

/* کلاس‌های متنی */
.text-yellow {
    color: var(--yellow) !important; /* استفاده از رنگ زرد */
}

.text-yellow-100 {
    color: var(--yellow-100) !important; /* استفاده از رنگ زرد ۱۰۰ */
}

.text-yellow-200 {
    color: var(--yellow-200) !important; /* استفاده از رنگ زرد ۲۰۰ */
}

.text-yellow-300 {
    color: var(--yellow-300) !important; /* استفاده از رنگ زرد ۳۰۰ */
}

.text-yellow-400 {
    color: var(--yellow-400) !important; /* استفاده از رنگ زرد ۴۰۰ */
}

.text-yellow-500 {
    color: var(--yellow-500) !important; /* استفاده از رنگ زرد ۵۰۰ */
}

.text-yellow-600 {
    color: var(--yellow-600) !important; /* استفاده از رنگ زرد ۶۰۰ */
}

.text-yellow-700 {
    color: var(--yellow-700) !important; /* استفاده از رنگ زرد ۷۰۰ */
}

.text-yellow-800 {
    color: var(--yellow-800) !important; /* استفاده از رنگ زرد ۸۰۰ */
}

.text-yellow-900 {
    color: var(--yellow-900) !important; /* استفاده از رنگ زرد ۹۰۰ */
}

/* کلاس‌های سفارشی */
.bg-green {
    background-color: var(--green) !important; /* استفاده از رنگ سبز */
}

.bg-green-100 {
    background-color: var(--green-100) !important; /* استفاده از رنگ سبز ۱۰۰ */
}

.bg-green-200 {
    background-color: var(--green-200) !important; /* استفاده از رنگ سبز ۲۰۰ */
}

.bg-green-300 {
    background-color: var(--green-300) !important; /* استفاده از رنگ سبز ۳۰۰ */
}

.bg-green-400 {
    background-color: var(--green-400) !important; /* استفاده از رنگ سبز ۴۰۰ */
}

.bg-green-500 {
    background-color: var(--green-500) !important; /* استفاده از رنگ سبز ۵۰۰ */
}

.bg-green-600 {
    background-color: var(--green-600) !important; /* استفاده از رنگ سبز ۶۰۰ */
}

.bg-green-700 {
    background-color: var(--green-700) !important; /* استفاده از رنگ سبز ۷۰۰ */
}

.bg-green-800 {
    background-color: var(--green-800) !important; /* استفاده از رنگ سبز ۸۰۰ */
}

.bg-green-900 {
    background-color: var(--green-900) !important; /* استفاده از رنگ سبز ۹۰۰ */
}

/* کلاس‌های متنی */
.text-green {
    color: var(--green) !important; /* استفاده از رنگ سبز */
}

.text-green-100 {
    color: var(--green-100) !important; /* استفاده از رنگ سبز ۱۰۰ */
}

.text-green-200 {
    color: var(--green-200) !important; /* استفاده از رنگ سبز ۲۰۰ */
}

.text-green-300 {
    color: var(--green-300) !important; /* استفاده از رنگ سبز ۳۰۰ */
}

.text-green-400 {
    color: var(--green-400) !important; /* استفاده از رنگ سبز ۴۰۰ */
}

.text-green-500 {
    color: var(--green-500) !important; /* استفاده از رنگ سبز ۵۰۰ */
}

.text-green-600 {
    color: var(--green-600) !important; /* استفاده از رنگ سبز ۶۰۰ */
}

.text-green-700 {
    color: var(--green-700) !important; /* استفاده از رنگ سبز ۷۰۰ */
}

.text-green-800 {
    color: var(--green-800) !important; /* استفاده از رنگ سبز ۸۰۰ */
}

.text-green-900 {
    color: var(--green-900) !important; /* استفاده از رنگ سبز ۹۰۰ */
}

/* کلاس‌های سفارشی */
.bg-teal {
    background-color: var(--teal) !important; /* استفاده از رنگ فیروزه‌ای */
}

.bg-teal-100 {
    background-color: var(--teal-100) !important; /* استفاده از رنگ فیروزه‌ای ۱۰۰ */
}

.bg-teal-200 {
    background-color: var(--teal-200) !important; /* استفاده از رنگ فیروزه‌ای ۲۰۰ */
}

.bg-teal-300 {
    background-color: var(--teal-300) !important; /* استفاده از رنگ فیروزه‌ای ۳۰۰ */
}

.bg-teal-400 {
    background-color: var(--teal-400) !important; /* استفاده از رنگ فیروزه‌ای ۴۰۰ */
}

.bg-teal-500 {
    background-color: var(--teal-500) !important; /* استفاده از رنگ فیروزه‌ای ۵۰۰ */
}

.bg-teal-600 {
    background-color: var(--teal-600) !important; /* استفاده از رنگ فیروزه‌ای ۶۰۰ */
}

.bg-teal-700 {
    background-color: var(--teal-700) !important; /* استفاده از رنگ فیروزه‌ای ۷۰۰ */
}

.bg-teal-800 {
    background-color: var(--teal-800) !important; /* استفاده از رنگ فیروزه‌ای ۸۰۰ */
}

.bg-teal-900 {
    background-color: var(--teal-900) !important; /* استفاده از رنگ فیروزه‌ای ۹۰۰ */
}

/* کلاس‌های متنی */
.text-teal {
    color: var(--teal) !important; /* استفاده از رنگ فیروزه‌ای */
}

.text-teal-100 {
    color: var(--teal-100) !important; /* استفاده از رنگ فیروزه‌ای ۱۰۰ */
}

.text-teal-200 {
    color: var(--teal-200) !important; /* استفاده از رنگ فیروزه‌ای ۲۰۰ */
}

.text-teal-300 {
    color: var(--teal-300) !important; /* استفاده از رنگ فیروزه‌ای ۳۰۰ */
}

.text-teal-400 {
    color: var(--teal-400) !important; /* استفاده از رنگ فیروزه‌ای ۴۰۰ */
}

.text-teal-500 {
    color: var(--teal-500) !important; /* استفاده از رنگ فیروزه‌ای ۵۰۰ */
}

.text-teal-600 {
    color: var(--teal-600) !important; /* استفاده از رنگ فیروزه‌ای ۶۰۰ */
}

.text-teal-700 {
    color: var(--teal-700) !important; /* استفاده از رنگ فیروزه‌ای ۷۰۰ */
}

.text-teal-800 {
    color: var(--teal-800) !important; /* استفاده از رنگ فیروزه‌ای ۸۰۰ */
}

.text-teal-900 {
    color: var(--teal-900) !important; /* استفاده از رنگ فیروزه‌ای ۹۰۰ */
}

/* کلاس‌های سفارشی */
.bg-cyan {
    background-color: var(--cyan) !important; /* استفاده از رنگ آبی‌فیروزه‌ای */
}

.bg-cyan-100 {
    background-color: var(--cyan-100) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۱۰۰ */
}

.bg-cyan-200 {
    background-color: var(--cyan-200) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۲۰۰ */
}

.bg-cyan-300 {
    background-color: var(--cyan-300) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۳۰۰ */
}

.bg-cyan-400 {
    background-color: var(--cyan-400) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۴۰۰ */
}

.bg-cyan-500 {
    background-color: var(--cyan-500) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۵۰۰ */
}

.bg-cyan-600 {
    background-color: var(--cyan-600) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۶۰۰ */
}

.bg-cyan-700 {
    background-color: var(--cyan-700) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۷۰۰ */
}

.bg-cyan-800 {
    background-color: var(--cyan-800) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۸۰۰ */
}

.bg-cyan-900 {
    background-color: var(--cyan-900) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۹۰۰ */
}

/* کلاس‌های متنی */
.text-cyan {
    color: var(--cyan) !important; /* استفاده از رنگ آبی‌فیروزه‌ای */
}

.text-cyan-100 {
    color: var(--cyan-100) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۱۰۰ */
}

.text-cyan-200 {
    color: var(--cyan-200) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۲۰۰ */
}

.text-cyan-300 {
    color: var(--cyan-300) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۳۰۰ */
}

.text-cyan-400 {
    color: var(--cyan-400) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۴۰۰ */
}

.text-cyan-500 {
    color: var(--cyan-500) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۵۰۰ */
}

.text-cyan-600 {
    color: var(--cyan-600) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۶۰۰ */
}

.text-cyan-700 {
    color: var(--cyan-700) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۷۰۰ */
}

.text-cyan-800 {
    color: var(--cyan-800) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۸۰۰ */
}

.text-cyan-900 {
    color: var(--cyan-900) !important; /* استفاده از رنگ آبی‌فیروزه‌ای ۹۰۰ */
}

.bg-gray-100 {
    background-color: var(--gray-100) !important; /* استفاده از رنگ خاکستری ۱۰۰ */
}

.bg-gray-200 {
    background-color: var(--gray-200) !important; /* استفاده از رنگ خاکستری ۲۰۰ */
}

.bg-gray-300 {
    background-color: var(--gray-300) !important; /* استفاده از رنگ خاکستری ۳۰۰ */
}

.bg-gray-400 {
    background-color: var(--gray-400) !important; /* استفاده از رنگ خاکستری ۴۰۰ */
}

.bg-gray-500 {
    background-color: var(--gray-500) !important; /* استفاده از رنگ خاکستری ۵۰۰ */
}

.bg-gray-600 {
    background-color: var(--gray-600) !important; /* استفاده از رنگ خاکستری ۶۰۰ */
}

.bg-gray-700 {
    background-color: var(--gray-700) !important; /* استفاده از رنگ خاکستری ۷۰۰ */
}

.bg-gray-800 {
    background-color: var(--gray-800) !important; /* استفاده از رنگ خاکستری ۸۰۰ */
}

.bg-gray-900 {
    background-color: var(--gray-900) !important; /* استفاده از رنگ خاکستری ۹۰۰ */
}
/* کلاس‌های متنی */
.text-gray-100 {
    color: var(--gray-100) !important; /* استفاده از رنگ خاکستری ۱۰۰ */
}

.text-gray-200 {
    color: var(--gray-200) !important; /* استفاده از رنگ خاکستری ۲۰۰ */
}

.text-gray-300 {
    color: var(--gray-300) !important; /* استفاده از رنگ خاکستری ۳۰۰ */
}

.text-gray-400 {
    color: var(--gray-400) !important; /* استفاده از رنگ خاکستری ۴۰۰ */
}

.text-gray-500 {
    color: var(--gray-500) !important; /* استفاده از رنگ خاکستری ۵۰۰ */
}

.text-gray-600 {
    color: var(--gray-600) !important; /* استفاده از رنگ خاکستری ۶۰۰ */
}

.text-gray-700 {
    color: var(--gray-700) !important; /* استفاده از رنگ خاکستری ۷۰۰ */
}

.text-gray-800 {
    color: var(--gray-800) !important; /* استفاده از رنگ خاکستری ۸۰۰ */
}

.text-gray-900 {
    color: var(--gray-900) !important; /* استفاده از رنگ خاکستری ۹۰۰ */
}


.bg-black {
    background-color: var(--black) !important; /* استفاده از رنگ سیاه */
}

.bg-white {
    background-color: var(--white) !important; /* استفاده از رنگ سفید */
}

/* کلاس‌های متنی */
.text-white {
    color: var(--white) !important; /* استفاده از رنگ سفید */
}

.text-black {
    color: var(--black) !important; /* استفاده از رنگ سیاه */
}