:root {
    /* Main Color */
    --white: #fff;
    --black: #000;
    /* Primary Color */
    --crimson-color: #4F0000;
    --dark-crimson-color: #320500;
    --light-gray-color: #F1F2F2;
    --regular-gray-color: #D1D3D4;
    --dark-gray-color: #58595B;
    --beige-color: #D5BDAF;
    /* Crimson */
    --crimson-400: #731818;
    --crimson-300: #963232;
    --crimson-200: #AB4B4B;
    --crimson-100: #DD6464;
    --crimson-50: #F2C1C1;
    /* Dark Crimson */
    --dark-crimson-400: #4A1A1A;
    --dark-crimson-300: #653232;
    --dark-crimson-200: #804B4B;
    --dark-crimson-100: #9A6464;
    --dark-crimson-50: #EEDDD2;
    /* Light Gray */
    --light-gray-400: #D9DADB;
    --light-gray-300: #C1C2C3;
    --light-gray-200: #A9AAAB;
    --light-gray-100: #919293;
    /* Regular Gray */
    --medium-gray-400: #727374;
    --medium-gray-300: #8C8D8E;
    --medium-gray-200: #A6A7A8;
    --medium-gray-100: #C0C1C2;
    --medium-gray-50: #E2E3E4;
    /* Dark Gray */


    --h1-font-family: "Rokh", Helvetica;
    --h1-font-weight: 700;
    --h1-font-size: 48px;
    --h1-letter-spacing: 0px;
    --h1-line-height: 17.71428680419922px;
    --h1-font-style: normal;
    --h2-font-family: "Rokh", Helvetica;
    --h2-font-weight: 700;
    --h2-font-size: 38px;
    --h2-letter-spacing: 0px;
    --h2-line-height: 17.71428680419922px;
    --h2-font-style: normal;
    --h3-font-family: "Rokh", Helvetica;
    --h3-font-weight: 700;
    --h3-font-size: 34px;
    --h3-letter-spacing: 0px;
    --h3-line-height: 17.71428680419922px;
    --h3-font-style: normal;
    --variable-collection-dark-red: rgba(79, 0, 0, 1);
    --variable-collection-dark-brown: rgba(50, 5, 0, 1);
    --variable-collection-light-gray: rgba(241, 242, 242, 1);
    --variable-collection-dark-gray: rgba(88, 89, 91, 1);
    --variable-collection-silver: rgba(209, 211, 212, 1);
    --variable-collection-bezh: rgba(213, 189, 175, 1);
    
    --rokh-black: 'Rokh-Black';
    --rokh-bold: 'Rokh-Bold';
    --rokh-extra-bold: 'Rokh-ExtraBold';
    --rokh-extra-light: 'Rokh-ExtraLight';
    --rokh-hairline: 'Rokh-HairLine';
    --rokh-light: 'Rokh-Light';
    --rokh-medium: 'Rokh-Medium';
    --rokh-normal: 'Rokh-Normal';
    --rokh-regular: 'Rokh-Regular';
    --rokh-semi-bold: 'Rokh-SemiBold';
    --rokh-thin: 'Rokh-Thin';
    --rokh-ultra-bold: 'Rokh-UltraBold';
}

[lang='fa-IR'],
[lang='ar-SA'] {
    --rokh-black: 'Rokh-Black-Fa-Num';
    --rokh-bold: 'Rokh-Bold-Fa-Num';
    --rokh-extra-bold: 'Rokh-ExtraBold-Fa-Num';
    --rokh-extra-light: 'Rokh-ExtraLight-Fa-Num';
    --rokh-hairline: 'Rokh-HairLine-Fa-Num';
    --rokh-light: 'Rokh-Light-Fa-Num';
    --rokh-medium: 'Rokh-Medium-Fa-Num';
    --rokh-normal: 'Rokh-Normal-Fa-Num';
    --rokh-regular: 'Rokh-Regular-Fa-Num';
    --rokh-semi-bold: 'Rokh-SemiBold-Fa-Num';
    --rokh-thin: 'Rokh-Thin-Fa-Num';
    --rokh-ultra-bold: 'Rokh-UltraBold-Fa-Num';
}

/* Primary Color */
.crimson {
    color: var(--crimson-color) !important;
}

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

.dark-crimson {
    color: var(--dark-crimson-color);
}

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

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

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

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

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

.dark-gray {
    color: var(--dark-gray-color);
}

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

/* Crimson */
.crimson-400 {
    color: #731818 !important;
}

.crimson-300 {
    color: #963232;
}

.crimson-200 {
    color: #AB4B4B !important;
}

.crimson-100 {
    color: #DD6464;
}

.crimson-50 {
    color: #F2C1C1;
}

.bg-crimson-400 {
    background-color: #731818;
}

.bg-crimson-300 {
    background-color: #963232;
}

.bg-crimson-200 {
    background-color: #AB4B4B;
}

.bg-crimson-100 {
    background-color: #DD6464;
}

.bg-crimson-50 {
    background-color: #F2C1C1;
}

/* Dark Crimson */
.dark-crimson-400 {
    color: #4A1A1A;
}

.dark-crimson-300 {
    color: #653232;
}

.dark-crimson-200 {
    color: #804B4B;
}

.dark-crimson-100 {
    color: #9A6464;
}

.dark-crimson-50 {
    color: #EDD0D2;
}

.bg-dark-crimson-400 {
    background-color: #4A1A1A;
}

.bg-dark-crimson-300 {
    background-color: #653232;
}

.bg-dark-crimson-200 {
    background-color: #804B4B;
}

.bg-dark-crimson-100 {
    background-color: #9A6464;
}

.bg-dark-crimson-50 {
    background-color: #EDD0D2;
}

/* Light Gray */
.light-gray-400 {
    color: #D9DADB !important;
}

.light-gray-300 {
    color: #C1C2C3 !important;
}

.light-gray-200 {
    color: #A9AAAB !important;
}

.light-gray-100 {
    color: #919293 !important;
}

.bg-light-gray-400 {
    background-color: #D9DADB;
}

.bg-light-gray-300 {
    background-color: #C1C2C3;
}

.bg-light-gray-200 {
    background-color: #A9AAAB;
}

.bg-light-gray-100 {
    background-color: #919293;
}

/* Regular Gray */
.medium-gray-400 {
    color: #727374 !important;
}

.medium-gray-300 {
    color: #8C8D8E !important;
}

.medium-gray-200 {
    color: #A6A7A8 !important;
}

.medium-gray-100 {
    color: #C0C1C2 !important;
}

.medium-gray-50 {
    color: #E2E3E4 !important;
}

.bg-medium-gray-400 {
    background-color: #727374;
}

.bg-medium-gray-300 {
    background-color: #8C8D8E;
}

.bg-medium-gray-200 {
    background-color: #A6A7A8;
}

.bg-medium-gray-100 {
    background-color: #C0C1C2;
}

.bg-medium-gray-50 {
    background-color: #E2E3E4;
}

/* Beige */
.beige {
    color: #D5BDAF;
}

.bg-beige {
    background-color: #D5BDAF;
}

.beige-color {
    color: #EDE8D0 !important;
}

.bg-beige-color {
    background-color: #EDE8D0 !important;
}

/* Main Color  */
.white {
    color: var(--white) !important;
}

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

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

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


/* font rokh */

.font-rokh-black {
    font-family: var(--rokh-black) !important;
}

.font-rokh-bold {
    font-family: var(--rokh-bold) !important;
}

.font-rokh-extra-bold {
    font-family: var(--rokh-extra-bold) !important;
}

.font-rokh-extra-light {
    font-family: var(--rokh-extra-light) !important;
}

.font-rokh-hairline {
    font-family: var(--rokh-hairline) !important;
}

.font-rokh-light {
    font-family: var(--rokh-light) !important;
}

.font-rokh-medium {
    font-family: var(--rokh-medium) !important;
}

.font-rokh-normal {
    font-family: var(--rokh-normal) !important;
}

.font-rokh-regular {
    font-family: var(--rokh-regular) !important;
}

.font-rokh-semi-bold {
    font-family: var(--rokh-semi-bold) !important;
}

.font-rokh-thin {
    font-family: var(--rokh-thin) !important;
}

.font-rokh-ultra-bold {
    font-family: var(--rokh-ultra-bold) !important;
}

.btn-crimson-300 {
    --bs-btn-color: var(--regular-gray-color) !important;
    --bs-btn-bg: var(--crimson-300) !important;
    --bs-btn-border-color: var(--crimson-300) !important;
    --bs-btn-hover-color: var(--regular-gray-color) !important;
    --bs-btn-hover-bg: var(--crimson-200) !important;
    --bs-btn-hover-border-color: var(--crimson-200) !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253 !important;
    --bs-btn-active-color: var(--regular-gray-color) !important;
    --bs-btn-active-bg: var(--crimson-200) !important;
    --bs-btn-active-border-color: var(--crimson-200) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--regular-gray-color) !important;
    --bs-btn-disabled-bg: var(--crimson-300) !important;
    --bs-btn-disabled-border-color: var(--crimson-300) !important;
}

.btn-dark-crimson {
    --bs-btn-color: var(--regular-gray-color) !important;
    --bs-btn-bg: var(--dark-crimson-color) !important;
    --bs-btn-border-color: var(--dark-crimson-color) !important;
    --bs-btn-hover-color: var(--regular-gray-color) !important;
    --bs-btn-hover-bg: var(--dark-crimson-400) !important;
    --bs-btn-hover-border-color: var(--dark-crimson-400) !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253 !important;
    --bs-btn-active-color: var(--regular-gray-color) !important;
    --bs-btn-active-bg: var(--dark-crimson-400) !important;
    --bs-btn-active-border-color: var(--dark-crimson-400) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--regular-gray-color) !important;
    --bs-btn-disabled-bg: var(--dark-crimson-color) !important;
    --bs-btn-disabled-border-color: var(--dark-crimson-color) !important;
}

.btn-crimson {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--crimson-color) !important;
    --bs-btn-border-color: var(--crimson-color) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--dark-crimson-color) !important;
    --bs-btn-hover-border-color: var(--dark-crimson-color) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--crimson-400) !important;
    --bs-btn-active-border-color: var(--crimson-400) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--crimson-50) !important;
    --bs-btn-disabled-border-color: var(--crimson-50) !important;
}

.btn-outline-crimson {
    --bs-btn-color: var(--crimson-color) !important;
    --bs-btn-bg: transparent !important;
    --bs-btn-border-color: var(--crimson-color) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--crimson-color) !important;
    --bs-btn-hover-border-color: var(--crimson-color) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--crimson-400) !important;
    --bs-btn-active-border-color: var(--crimson-400) !important;
    --bs-btn-disabled-color: var(--crimson-50) !important;
    --bs-btn-disabled-border-color: var(--crimson-50) !important;
    --bs-gradient: none;
}


.btn-light-gray {
    --bs-btn-color: var(--dark-gray-color) !important;
    --bs-btn-bg: var(--light-gray-color) !important;
    --bs-btn-border-color: var(--light-gray-color) !important;
    --bs-btn-hover-color: var(--black) !important;
    --bs-btn-hover-bg: var(--regular-gray-color) !important;
    --bs-btn-hover-border-color: var(--regular-gray-color) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: var(--medium-gray-400) !important;
    --bs-btn-active-bg: var(--light-gray-400) !important;
    --bs-btn-active-border-color: var(--light-gray-400) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--light-gray-100) !important;
    --bs-btn-disabled-border-color: var(--light-gray-100) !important;
}

.btn-crimson-100 {
    --bs-btn-color: var(--light-gray-color) !important;
    --bs-btn-bg: var(--crimson-100) !important;
    --bs-btn-border-color: var(--crimson-100) !important;
    --bs-btn-hover-color: var(--regular-gray-color) !important;
    --bs-btn-hover-bg: var(--crimson-200) !important;
    --bs-btn-hover-border-color: var(--crimson-200) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: var(--regular-gray-color) !important;
    --bs-btn-active-bg: var(--crimson-200) !important;
    --bs-btn-active-border-color: var(--crimson-200) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--light-gray-100) !important;
    --bs-btn-disabled-bg: var(--crimson-50) !important;
    --bs-btn-disabled-border-color: var(--crimson-50) !important;
}

.btn-light-gray-400 {
    --bs-btn-color: var(--black) !important;
    --bs-btn-bg: var(--light-gray-400) !important;
    --bs-btn-border-color: var(--light-gray-400) !important;
    --bs-btn-hover-color: var(--black) !important;
    --bs-btn-hover-bg: var(--light-gray-200) !important;
    --bs-btn-hover-border-color: var(--light-gray-200) !important;
    --bs-btn-focus-shadow-rgb: 225, 83, 97 !important;
    --bs-btn-active-color: var(--black) !important;
    --bs-btn-active-bg: var(--light-gray-200) !important;
    --bs-btn-active-border-color: var(--light-gray-200) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--light-gray-400) !important;
    --bs-btn-disabled-bg: var(--light-gray-100) !important;
    --bs-btn-disabled-border-color: var(--light-gray-100) !important;
}