:root {
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto', sans-serif;

    --color-primary: #f89e3d;
    --color-primary-light: #f19f69;
    --color-secondary: #81c868;
    --color-gradient: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    --color-gradient2: linear-gradient(180deg, #e7680f 0%, #D6A756 100%);
    --color-gradient3: linear-gradient(135deg, #D6A756 0%, #e7680f 100%);
    --color-golden: #d4a574;
    --color-light-gray: #d3d3d3;
    --color-dark: #0a0b0b;
    --color-light: #f8f9fa;
}

body {
    font-family: var(--font-primary), sans-serif;
    background-color: var(--color-light);
    color: var(--color-dark);
}

.body-color {
    background-color: #f3ddce;
}

a {
    text-decoration: none !important;
}

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


/* Utility Classes */
.primary_color {
    color: var(--color-primary) !important;
}

.button1 {
    background-color: var(--color-primary-light) !important;
    color: var(--color-dark) !important;
}

.button2 {
    background-color: var(--color-primary) !important;
    color: var(--color-dark) !important;
}

.tab-btn-style {
    color: var(--color-dark) !important ;
}

.tab-btn-style.active {
    background-color: var(--color-primary) !important;
    color: var(--color-light) !important;
    border: none !important;
}

.button-outline {
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}
.button-outline:hover {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-light) !important;
}

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

.gradient-bg-1 {
    color: var(--color-dark);
    background: linear-gradient(135deg, #eda949, #e3871d);
}

.gradient-bg-2 {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-light) !important;
}
.gradient-bg-2:hover {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

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

.gradient-text {
    background: var(--color-gradient2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.primary-border-style {
    border: 4px solid var(--color-primary) !important;
}

.bg-gradient-custom {
    background: var(--color-gradient3);
}

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


.sidebar-button.active {
    background-color: var(--color-primary) !important;
    color: var(--color-light) !important;
    border: none !important;
}

.sidebar-button:not(.active) {
    background-color: var(--color-light) !important;
    color: #000 !important;
    border: 1px solid var(--color-light-gray) !important;
}

.chat-user-link.active {
    background-color: var(--color-primary-light) !important;
    border: 0 solid var(--color-primary-light) !important;
    border-radius: 0.5rem !important;
}


.profile-section {
    display: none;
}
.profile-section.active {
    display: block;
}

.r-clip {
    background: var(--color-gradient2) !important;
    clip-path: polygon(
        0 0,
        15px 0,
        calc(100% - 15px) 0,
        100% 0,
        100% 70%,
        50% 100%,
        0 70%
    );
}

.glossy-input {
    background: #fff;
    backdrop-filter: blur(8px);
    border: 2px solid transparent;
    padding: 0.5rem 1.25rem;
}
.bg-glass {
    background: transparent;
    backdrop-filter: blur(10px);
}
.toggle-icon {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.2rem;
    color: #6c757d;
}