.light {
    /* Green Colors */
    --color-btn-green: linear-gradient(90deg, rgb(56, 214, 141) 0%, rgb(16, 159, 156) 100%);
    --color-btn-green-hover: linear-gradient(90deg, rgb(46, 204, 131) 0%, rgb(6, 149, 146) 100%);
    --color-btn-green-active: linear-gradient(90deg, rgb(36, 194, 121) 0%, rgb(0, 139, 136) 100%);

    --color-btn-outline-green: rgb(56, 214, 141);
    --color-btn-outline-green-hover: rgba(56, 214, 141, 0.1);
    --color-btn-outline-green-active: rgba(56, 214, 141, 0.2);

    --color-btn-monochrome-green: rgb(56, 214, 141);
    --color-btn-monochrome-green-hover: rgb(48, 204, 125);
    --color-btn-monochrome-green-active: rgb(40, 194, 117);
    
    /* Red Colors */
    --color-btn-red: linear-gradient(90deg, rgb(214, 56, 56) 0%, rgb(156, 16, 16) 100%);
    --color-btn-red-hover: linear-gradient(90deg, rgb(204, 46, 46) 0%, rgb(146, 6, 6) 100%);
    --color-btn-red-active: linear-gradient(90deg, rgb(194, 36, 36) 0%, rgb(136, 0, 0) 100%);

    --color-btn-outline-red: rgb(214, 56, 56);
    --color-btn-outline-red-hover: rgba(214, 56, 56, 0.1);
    --color-btn-outline-red-active: rgba(214, 56, 56, 0.2);

    --color-btn-monochrome-red: rgb(214, 56, 56);
    --color-btn-monochrome-red-hover: rgb(196, 40, 40);
    --color-btn-monochrome-red-active: rgb(180, 24, 24);
    
    /* Gray Colors */
    --color-btn-gray: linear-gradient(90deg, rgb(150, 150, 150) 0%, rgb(100, 100, 100) 100%);
    --color-btn-gray-hover: linear-gradient(90deg, rgb(140, 140, 140) 0%, rgb(90, 90, 90) 100%);
    --color-btn-gray-active: linear-gradient(90deg, rgb(130, 130, 130) 0%, rgb(80, 80, 80) 100%);

    --color-btn-outline-gray: rgb(150, 150, 150);
    --color-btn-outline-gray-hover: rgba(150, 150, 150, 0.1);
    --color-btn-outline-gray-active: rgba(150, 150, 150, 0.2);

    --color-btn-monochrome-gray: rgb(150, 150, 150);
    --color-btn-monochrome-gray-hover: rgb(140, 140, 140);
    --color-btn-monochrome-gray-active: rgb(130, 130, 130);
    

    /* !!! purple and blue buttons are switched in light theme !!!
    TODO - make it more convienient
    TODO - в принципе переписать весь файл с использованием ништяков типа colormix и currentColor*/

    /* Purple Colors */
    --color-btn-blue: linear-gradient(90deg, rgb(106, 90, 205) 0%, rgb(136, 28, 215) 100%);
    --color-btn-blue-hover: linear-gradient(90deg, rgb(96, 80, 195) 0%, rgb(126, 18, 205) 100%);
    --color-btn-blue-active: linear-gradient(90deg, rgb(86, 70, 185) 0%, rgb(116, 8, 195) 100%);

    --color-btn-outline-blue: rgb(106, 90, 205);
    --color-btn-outline-blue-hover: rgba(106, 90, 205, 0.1);
    --color-btn-outline-blue-active: rgba(106, 90, 205, 0.2);

    --color-btn-monochrome-blue: rgb(106, 90, 205);
    --color-btn-monochrome-blue-hover: rgb(96, 80, 195);
    --color-btn-monochrome-blue-active: rgb(86, 70, 185);
    
    /* Blue Colors */
    --color-btn-purple: linear-gradient(90deg, rgb(56, 141, 214) 0%, rgb(16, 96, 159) 100%);
    --color-btn-purple-hover: linear-gradient(90deg, rgb(46, 131, 204) 0%, rgb(6, 86, 149) 100%);
    --color-btn-purple-active: linear-gradient(90deg, rgb(36, 121, 194) 0%, rgb(0, 76, 139) 100%);

    --color-btn-outline-purple: rgb(56, 141, 214);
    --color-btn-outline-purple-hover: rgba(56, 141, 214, 0.1);
    --color-btn-outline-purple-active: rgba(56, 141, 214, 0.2);

    --color-btn-monochrome-purple: rgb(56, 145, 214);
    --color-btn-monochrome-purple-hover: rgb(48, 129, 196);
    --color-btn-monochrome-purple-active: rgb(40, 113, 178);
 
}

.dark {
    /* Green Colors */
    --color-btn-green: linear-gradient(90deg, rgb(40, 150, 100) 0%, rgb(10, 100, 100) 100%);
    --color-btn-green-hover: linear-gradient(90deg, rgb(30, 140, 90) 0%, rgb(5, 90, 90) 100%);
    --color-btn-green-active: linear-gradient(90deg, rgb(20, 130, 80) 0%, rgb(0, 80, 80) 100%);
    
    --color-btn-outline-green: rgb(40, 150, 100);
    --color-btn-outline-green-hover: rgba(40, 150, 100, 0.1);
    --color-btn-outline-green-active: rgba(40, 150, 100, 0.2);

    --color-btn-monochrome-green: rgb(40, 150, 100);
    --color-btn-monochrome-green-hover: rgb(40, 134, 94);
    --color-btn-monochrome-green-active: rgb(32, 118, 78);
    
    /* Red Colors */
    --color-btn-red: linear-gradient(90deg, rgb(150, 40, 40) 0%, rgb(100, 10, 10) 100%);
    --color-btn-red-hover: linear-gradient(90deg, rgb(140, 30, 30) 0%, rgb(90, 5, 5) 100%);
    --color-btn-red-active: linear-gradient(90deg, rgb(130, 20, 20) 0%, rgb(80, 0, 0) 100%);
    
    --color-btn-outline-red: rgb(150, 40, 40);
    --color-btn-outline-red-hover: rgba(150, 40, 40, 0.1);
    --color-btn-outline-red-active: rgba(150, 40, 40, 0.2);

    --color-btn-monochrome-red: rgb(150, 40, 40);
    --color-btn-monochrome-red-hover: rgb(140, 30, 30);
    --color-btn-monochrome-red-active: rgb(130, 20, 20);
    
    /* Gray Colors */
    --color-btn-gray: linear-gradient(90deg, rgb(100, 100, 100) 0%, rgb(60, 60, 60) 100%);
    --color-btn-gray-hover: linear-gradient(90deg, rgb(90, 90, 90) 0%, rgb(50, 50, 50) 100%);
    --color-btn-gray-active: linear-gradient(90deg, rgb(80, 80, 80) 0%, rgb(40, 40, 40) 100%);
    
    --color-btn-outline-gray: rgb(100, 100, 100);
    --color-btn-outline-gray-hover: rgba(100, 100, 100, 0.1);
    --color-btn-outline-gray-active: rgba(100, 100, 100, 0.2);

    --color-btn-monochrome-gray: rgb(100, 100, 100);
    --color-btn-monochrome-gray-hover: rgb(90, 90, 90);
    --color-btn-monochrome-gray-active: rgb(80, 80, 80);
    
    /* Purple Colors */
    --color-btn-purple: linear-gradient(90deg, rgb(86, 70, 185) 0%, rgb(116, 18, 195) 100%);
    --color-btn-purple-hover: linear-gradient(90deg, rgb(76, 60, 175) 0%, rgb(106, 8, 185) 100%);
    --color-btn-purple-active: linear-gradient(90deg, rgb(66, 50, 165) 0%, rgb(96, 0, 175) 100%);
    
    --color-btn-outline-purple: rgb(86, 70, 185);
    --color-btn-outline-purple-hover: rgba(86, 70, 185, 0.1);
    --color-btn-outline-purple-active: rgba(86, 70, 185, 0.2);

    --color-btn-monochrome-purple: rgb(86, 70, 185);
    --color-btn-monochrome-purple-hover: rgb(76, 60, 175);
    --color-btn-monochrome-purple-active: rgb(66, 50, 165);
    
    /* Blue Colors */
    --color-btn-blue: linear-gradient(90deg, rgb(40, 100, 150) 0%, rgb(10, 60, 100) 100%);
    --color-btn-blue-hover: linear-gradient(90deg, rgb(30, 90, 140) 0%, rgb(5, 50, 90) 100%);
    --color-btn-blue-active: linear-gradient(90deg, rgb(20, 80, 130) 0%, rgb(0, 40, 80) 100%);
    
    --color-btn-outline-blue: rgb(40, 100, 150);
    --color-btn-outline-blue-hover: rgba(40, 100, 150, 0.1);
    --color-btn-outline-blue-active: rgba(40, 100, 150, 0.2);

    --color-btn-monochrome-blue: rgb(40, 100, 150);
    --color-btn-monochrome-blue-hover: rgb(40, 84, 124);
    --color-btn-monochrome-blue-active: rgb(32, 68, 108);
}



/* Общие стили для всех кнопок */
.btn {
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.3s, box-shadow 0.3s, transform 0.3s;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    height: 50px;
    width: 100%;
    font-size: clamp(1rem, 2.5vw, 1.2rem);


}


/*Green Buttons*/
.btn-green {
    background: var(--color-btn-green);
}

.btn-green:hover {
    background: var(--color-btn-green-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-green:active {
    background: var(--color-btn-green-active);
    transform: scale(0.95);
}

.btn-outline-green {
    background: transparent;
    color: var(--color-btn-outline-green);
    border: 2px solid var(--color-btn-outline-green);
    box-sizing: border-box;
}

.btn-outline-green:hover {
    background: var(--color-btn-outline-green-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-outline-green:active {
    background: var(--color-btn-outline-green-active);
    transform: scale(0.95);
}

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

.btn-monochrome-green:hover {
    background: var(--color-btn-monochrome-green-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-monochrome-green:active {
    background: var(--color-btn-monochrome-green-active);
    transform: scale(0.95);
}


/*Red Buttonst*/
.btn-red {
    background: var(--color-btn-red);
}

.btn-red:hover {
    background: var(--color-btn-red-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-red:active {
    background: var(--color-btn-red-active);
    transform: scale(0.95);
}

.btn-outline-red {
    background: transparent;
    color: var(--color-btn-outline-red);
    border: 2px solid var(--color-btn-outline-red);
    box-sizing: border-box;
}

.btn-outline-red:hover {
    background: var(--color-btn-outline-red-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-outline-red:active {
    background: var(--color-btn-outline-red-active);
    transform: scale(0.95);
}

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

.btn-monochrome-red:hover {
    background: var(--color-btn-monochrome-red-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-monochrome-red:active {
    background: var(--color-btn-monochrome-red-active);
    transform: scale(0.95);
}


/*Gray Buttonst*/
.btn-gray {
    background: var(--color-btn-gray);
}

.btn-gray:hover {
    background: var(--color-btn-gray-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-gray:active {
    background: var(--color-btn-gray-active);
    transform: scale(0.95);
}

.btn-outline-gray {
    background: transparent;
    color: var(--color-btn-outline-gray);
    border: 2px solid var(--color-btn-outline-gray);
    box-sizing: border-box;
}

.btn-outline-gray:hover {
    background: var(--color-btn-outline-gray-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-outline-gray:active {
    background: var(--color-btn-outline-gray-active);
    transform: scale(0.95);
}

.btn-monochrome-gray {
    background: var(--color-btn-monochrome-gray);
}

.btn-monochrome-gray:hover {
    background: var(--color-btn-monochrome-gray-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-monochrome-gray:active {
    background: var(--color-btn-monochrome-gray-active);
    transform: scale(0.95);
}



/*Purple Buttons*/
.btn-purple {
    background: var(--color-btn-purple);
}

.btn-purple:hover {
    background: var(--color-btn-purple-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-purple:active {
    background: var(--color-btn-purple-active);
    transform: scale(0.95);
}

.btn-outline-purple {
    background: transparent;
    color: var(--color-btn-outline-purple);
    border: 2px solid var(--color-btn-outline-purple);
    box-sizing: border-box;
}

.btn-outline-purple:hover {
    background: var(--color-btn-outline-purple-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-outline-purple:active {
    background: var(--color-btn-outline-purple-active);
    transform: scale(0.95);
}

.btn-monochrome-purple {
    background: var(--color-btn-monochrome-purple);
}

.btn-monochrome-purple:hover {
    background: var(--color-btn-monochrome-purple-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-monochrome-purple:active {
    background: var(--color-btn-monochrome-purple-active);
    transform: scale(0.95);
}




/*Blue Buttonst*/
.btn-blue {
    background: var(--color-btn-blue);
}

.btn-blue:hover {
    background: var(--color-btn-blue-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-blue:active {
    background: var(--color-btn-blue-active);
    transform: scale(0.95);
}

.btn-outline-blue {
    background: transparent;
    color: var(--color-btn-outline-blue);
    border: 2px solid var(--color-btn-outline-blue);
    box-sizing: border-box;
}

.btn-outline-blue:hover {
    background: var(--color-btn-outline-blue-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-outline-blue:active {
    background: var(--color-btn-outline-blue-active);
    transform: scale(0.95);
}

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

.btn-monochrome-blue:hover {
    background: var(--color-btn-monochrome-blue-hover);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-monochrome-blue:active {
    background: var(--color-btn-monochrome-blue-active);
    transform: scale(0.95);
}




.btn-outline-white {
    background: transparent;
    color: white; 
    border: 2px solid white; 
    box-sizing: border-box;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1); 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-outline-white:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}