/***************/
/** VARIABLES **/
/***************/

:root {
    /* DEHOGA PRIMARY COLOR */

    --dho-primary: #004489;
    --dho-primary-rgb: rgb(0, 68, 137);
    --dho-primary-dark: #002e5c;
    --dho-primary-dark-rgb: rgb(0, 46, 92);
    --dho-primary-light: #99b4d0;
    --dho-primary-light-rgb: rgb(153, 180, 208);
    --dho-primary-transparent: rgb(0, 68, 137, 0.8);
    
    /* DEHOGA SECONDARY COLOR */

    --dho-secondary: #ff6600;
    --dho-secondary-rgb: rgb(255, 102, 0);
    --dho-secondary-dark: #cc5200;
    --dho-secondary-dark-rgb: rgb(204, 82, 0);
    --dho-secondary-light: #ffb380;
    --dho-secondary-light-rgb: rgb(255, 179, 128);
    --dho-secondary-transparent: rgb(255, 102, 0, 0.8);

    /* STATUS COLORS */

    --dho-success: #1C996F;
    --dho-success-rgb: rgb(28, 153, 111);
    --dho-danger: #DB516B;
    --dho-danger-rgb: rgb(219, 81, 107);
    --dho-warning: #FFC054;
    --dho-warning-rgb: rgb(255, 192, 84);
    --dho-info: #BCE4B2;
    --dho-info-rgb: rgb(188, 228, 178);

    /* DEHOGA PRIMARY SCALE */

    --dho-100: #004489;
    --dho-100-rgb: rgb(0, 68, 137);
    --dho-90: #1A5795;
    --dho-90-rgb: rgb(26, 87, 149);
    --dho-80: #3369a1;
    --dho-80-rgb: rgb(51, 105, 161);
    --dho-70: #4d7fb4;
    --dho-70-rgb: rgb(77, 127, 180);
    --dho-60: #6694c6;
    --dho-60-rgb: rgb(102, 148, 198);
    --dho-50: #80a9d8;
    --dho-50-rgb: rgb(128, 169, 216);
    --dho-40: #99bfe2;
    --dho-40-rgb: rgb(153, 191, 226);
    --dho-30: #b3d4ec;
    --dho-30-rgb: rgb(179, 212, 236);
    --dho-20: #cce2f3;
    --dho-20-rgb: rgb(204, 226, 243);
    --dho-10: #e6f0f9;
    --dho-10-rgb: rgb(230, 240, 249);

    /* DEHOGA SECONDARY SCALE */

    --dho-orange-100: #ff6600;
    --dho-orange-100-rgb: rgb(255, 102, 0);
    --dho-orange-80: #ff8533;
    --dho-orange-80-rgb: rgb(255, 133, 51);
    --dho-orange-60: #ffa366;
    --dho-orange-60-rgb: rgb(255, 163, 102);
    --dho-orange-40: #ffc299;
    --dho-orange-40-rgb: rgb(255, 194, 153);
    --dho-orange-20: #ffe0cc;
    --dho-orange-20-rgb: rgb(255, 224, 204);

    /* GRAY SCALES */

    --dho-black: #000000;
    --dho-black-rgb: rgb(0, 0, 0);
    --dho-gray-90: #1A1A1A;
    --dho-gray-90-rgb: rgb(26, 26, 26);
    --dho-gray-80: #333333;
    --dho-gray-80-rgb: rgb(51, 51, 51);
    --dho-gray-70: #4D4D4D;
    --dho-gray-70-rgb: rgb(77, 77, 77);
    --dho-gray-60: #666666;
    --dho-gray-60-rgb: rgb(102, 102, 102);
    --dho-gray-50: #7F7F7F;
    --dho-gray-50-rgb: rgb(127, 127, 127);
    --dho-gray-40: #999999;
    --dho-gray-40-rgb: rgb(153, 153, 153);
    --dho-gray-30: #B2B2B2;
    --dho-gray-30-rgb: rgb(178, 178, 178);
    --dho-gray-20: #CCCCCC;
    --dho-gray-20-rgb: rgb(204, 204, 204);
    --dho-gray-10: #E5E5E5;
    --dho-gray-10-rgb: rgb(229, 229, 229);
    --dho-white: #ffffff;
    --dho-white-rgb: rgb(255, 255, 255);
    
    /* Crafto override */

    --base-color: var(--dho-primary);
    
    /* Border Radius */

    --bs-border-radius: 4px;
    --dho-default-border-radius: 4px;
    --dho-rounded-border-radius: 50px;
}

/**********/
/** URLS **/
/**********/

a {
    color: var(--dho-primary);
}

a:hover {
    color: var(--dho-secondary);
}

.white-link {
    color: var(--dho-white);
}

.white-link:hover {
    color: var(--dho-secondary);
}

/*****************/
/** FONT COLORS **/
/*****************/

.dehoga-primary {
    color: var(--dho-primary);
}

.dehoga-secondary {
    color: var(--dho-secondary);
}

/*****************/
/** BACKGROUNDS **/
/*****************/

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

.bg-dehoga-primary-dark {
    background-color: var(--dho-primary-dark);
}

.bg-dehoga-primary-transparent {
    background-color: var(--dho-primary-transparent);
}

.bg-dehoga-primary-10 {
    background-color: var(--dho-10);
}

.bg-dehoga-secondary {
    background-color: var(--dho-secondary);
}

/*************/
/** BUTTONS **/
/*************/

.btn-dho-primary {
    background-color: var(--dho-primary);
    border-color: var(--dho-primary);
    color: var(--dho-white);
    border-radius: var(--bs-border-radius);
}

.btn-dho-primary:hover {
    background-color: transparent;
    border-color: var(--dho-primary);
    color: var(--dho-primary);
    border-radius: var(--bs-border-radius);
}

.btn-dho-secondary {
    background-color: var(--dho-secondary);
    border-color: var(--dho-secondary);
    color: var(--dho-white);
    border-radius: var(--bs-border-radius);
}

.btn-dho-secondary:hover {
    background-color: transparent;
    border-color: var(--dho-secondary);
    color: var(--dho-secondary);
    border-radius: var(--bs-border-radius);
}

.btn-dho-transparent-primary {
    background-color: transparent;
    border-color: var(--dho-primary);
    color: var(--dho-primary);
    border-radius: var(--bs-border-radius);
}

.btn-dho-transparent-primary:hover {
    background-color: var(--dho-primary);
    border-color: var(--dho-primary);
    color: var(--dho-white);
    border-radius: var(--bs-border-radius);
}

.btn-dho-transparent-secondary {
    background-color: transparent;
    border-color: var(--dho-secondary);
    color: var(--dho-secondary);
    border-radius: var(--bs-border-radius);
}

.btn-dho-transparent-secondary:hover {
    background-color: var(--dho-secondary);
    border-color: var(--dho-secondary);
    color: var(--dho-white);
    border-radius: var(--bs-border-radius);
}

.btn-dho-filled-primary {
    background-color: var(--dho-primary);
    border-color: var(--dho-primary);
    color: var(--dho-white);
    border-radius: var(--bs-border-radius);
}

.btn-dho-filled-primary:hover {
    background-color: var(--dho-primary);
    border-color: var(--dho-primary);
    color: var(--dho-white);
    border-radius: var(--bs-border-radius);
}

.btn-dho-filled-secondary {
    background-color: var(--dho-secondary);
    border-color: var(--dho-secondary);
    color: var(--dho-white);
    border-radius: var(--bs-border-radius);
}

.btn-dho-filled-secondary:hover {
    background-color: var(--dho-secondary);
    border-color: var(--dho-secondary);
    color: var(--dho-white);
    border-radius: var(--bs-border-radius);
}

.btn-gradient-blue-to-orange {
    background-image: linear-gradient(to right, var(--dho-primary), var(--dho-secondary-dark), var(--dho-primary));
    background-size: 200% auto;
    color: var(--white);
}

.btn-link {
    color: var(--dho-primary);
}

.btn-link:hover {
    color: var(--dho-secondary);
}

/*****************/
/** BOX SHADOWS **/
/*****************/

.no-shadow {
    box-shadow: none;
}

.small-shadow {
    box-shadow: 0 1px 4px 0 #0000001A;
}

.medium-shadow {
    box-shadow: 0 4px 10px 0 #0000001F;
}

.large-shadow {
    box-shadow: 0 8px 35px 0 #00000029;
}

/*******************/
/** BORDER RADIUS **/
/*******************/

.no-border-radius {
    border-radius: 0;
}

.default-border-radius {
    border-radius: var(--dho-default-border-radius);
}

.rounded-border-radius {
    border-radius: var(--dho-rounded-border-radius);
}