:root {
    --primary-light-color-rgb: 250, 247, 243;
    --primary-light-color: rgb(var(--primary-light-color-rgb));
    --primary-color-rgb: 133, 106, 88;
    --primary-color: rgb(var(--primary-color-rgb));
    --primary-dark-color-rgb: 84, 58, 41;
    --primary-dark-color: rgb(var(--primary-dark-color-rgb));
    --primary-background-color: rgb(var(--primary-color-rgb));
    --primary-background-image: linear-gradient(180deg, #A88974 0%, #543A29 100%);
    --primary-background-text-image: linear-gradient(180deg, #A88974 0%, #543A29 100%);

    --artcareone-background-image: linear-gradient(180deg, #82AAC6 0%, #375A73 100%);

    --danger-color-rgb: 187, 61, 61;
    --danger-color: rgb(var(--danger-color-rgb));

    --secondary-color-rgb: 110, 117, 124;
    --secondary-color: rgb(var(--secondary-color-rgb));
    --secondary-light-color: #eaecef;
    --secondary-background-color: #f8f9fa;
    --secondary-hover-background-color: var(--secondary-light-color);
    --secondary-active-background-color: #aeb5bd;
    --secondary-dark-background-color: #cccccc;

    --main-font-family: 'NeverMind';
    --main-icon-font-family: 'icon';
    --main-font-size: 16px;
    --main-font-weight: 400;
    --main-text-color: #404040;
    --main-background-color: #ffffff;
    --main-transition-fn: cubic-bezier(.5,0,.5,1);
    --main-container-width: 1344px;
    --main-container-offset: 32px;
    --main-border-radius: 12px;
    --main-border-color: var(--secondary-light-color);
    --table-border-color: #dfdfdf;
    --main-border-radius-image: 6px;
    --main-box-shadow-image: 0 2px 10px 0 rgba(0, 0, 0, .07);

    --form-label-font-size: 16px;
    --form-label-font-weight: var(--main-font-weight);
    --form-label-text-color: var(--main-text-color);
    --form-font-size: 20px;
    --form-text-color: var(--main-text-color);
    --form-border-color: rgba(var(--secondary-color-rgb), 0.3);
    --form-border-radius: 6px;
    --form-focus-border-color: var(--primary-color);
    --form-background-color: #ffffff;
    --form-placeholder-color: #cccccc;

    --header-height: 64px;
    --header-background-color: #ffffff;
    --header-fill-background-color: #f7f7f7;

    --h1-font-size-error: 30px;

    --button-font-size: 16px;
    --button-min-height: 48px;
    --button-border-radius: 6px;
    --button-primary-background-color: var(--primary-color);
    --button-primary-background-color-rgb: var(--primary-color-rgb);
    --button-primary-text-color: #ffffff;
    --button-secondary-background-color: #ffffff;
    --button-secondary-background-hover-color: var(--secondary-background-color);
    --button-secondary-background-active-color: #eaecef;
    --button-secondary-text-color: var(--main-text-color);
    --button-primary-outline-color: var(--primary-color);
    --button-primary-outline-border-color: rgba(var(--primary-color-rgb), 0.5);
    --button-primary-outline-border-hover-color: rgba(var(--primary-color-rgb), 0.7);
    --button-primary-outline-border-active-color: rgba(var(--primary-color-rgb), 1);
    --button-secondary-outline-color: var(--main-text-color);
    --button-secondary-outline-border-color: rgba(var(--secondary-color-rgb), 0.5);
    --button-secondary-outline-border-hover-color: rgba(var(--secondary-color-rgb), 0.7);
    --button-secondary-outline-border-active-color: rgba(var(--secondary-color-rgb), 1);

    --artcareone-color-rgb: 92, 126, 150;
    --artcareone-color: rgba(var(--artcareone-color-rgb), 1);

    
    --auth-input-error-color: #BB3D3D80;
    --auth-input-background: rgba(255, 255, 255, 0.1);
    --auth-input-border-color: rgba(255, 255, 255, 0.2);
    --auth-input-border: 1px solid var(--auth-input-border-color);
    --auth-input-border-radius: 17px;
    --auth-input-transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --auth-input-blur: 10px;

    --auth-input-focus-background: rgba(255, 255, 255, 0.15);
    --auth-input-focus-box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);

    /*breakpoints 576px, 768px, 992px, 1200px */
}

@media (max-width: 992px) {
    :root {
        --h1-font-size-error: 28px;
    }
}

@media (max-width: 768px) {
    :root {
        --form-font-size: 18px;
    }
}