@charset "UTF-8";

/* ============================ * Start theme related Colors ============================ */

:root {
    --brand-hue: 171;
    --brand-saturation: 100%;
    --brand-lightness: 22%;
    --secondary-hue: 19;
    --secondary-saturation: 45%;
    --secondary-lightness: 25%;
    /* Change this for icons */
    --color-img: brightness(0) saturate(100%) invert(36%) sepia(14%) saturate(3725%) hue-rotate(130deg) brightness(86%) contrast(101%);
    --secondary-img: brightness(0) saturate(100%) invert(20%) sepia(7%) saturate(4519%) hue-rotate(333deg) brightness(98%) contrast(86%);
}

/* ============================ * End theme related Colors ============================ */

/* Main */
:root {
    --main-50: hsl(calc(var(--brand-hue) - 1), calc(var(--brand-saturation) - 70%), calc(var(--brand-lightness) + 74%));
    --main-100: hsl(calc(var(--brand-hue) ), calc(var(--brand-saturation) - 60%), calc(var(--brand-lightness) + 66%));
    --main-200: hsla(calc(var(--brand-hue) - 9), calc(var(--brand-saturation) - 6%), calc(var(--brand-lightness) + 46%), 1);
    --main-300: hsla(calc(var(--brand-hue) - 4), calc(var(--brand-saturation) + 9%), calc(var(--brand-lightness) + 33%), 1);
    --main-color: hsl(var(--brand-hue), var(--brand-saturation), var(--brand-lightness)); /** As --main-400 */
    --main-400: hsl(var(--brand-hue), var(--brand-saturation), var(--brand-lightness));
    --main-500: hsla(calc(var(--brand-hue) + 1), calc(var(--brand-saturation) + 6%), calc(var(--brand-lightness) - 6%), 1);
    --main-600: hsla(calc(var(--brand-hue) + 2), calc(var(--brand-saturation) + 6%), calc(var(--brand-lightness) - 11%), 1);
    --main-700: hsla(calc(var(--brand-hue) + 2), calc(var(--brand-saturation) + 3%), calc(var(--brand-lightness) - 15%), 1);
    --main-800: hsla(calc(var(--brand-hue) + 5), calc(var(--brand-saturation) + 3%), calc(var(--brand-lightness) - 19%), 1);
    --main-900: hsla(calc(var(--brand-hue) + 6), calc(var(--brand-saturation) + 5%), calc(var(--brand-lightness) - 26%), 1);
    --gradient-degree: 90deg;
    --main-gradient: linear-gradient( var(--gradient-degree), hsl(calc(var(--brand-hue) + 1), calc(var(--brand-saturation) + 6%), calc(var(--brand-lightness) - 5%)) 0%, hsl(var(--brand-hue), var(--brand-saturation), var(--brand-lightness)) 100% );
}

/* Secondary */
:root {
    --secondary-50: hsl(calc(var(--secondary-hue) + 6), calc(var(--secondary-saturation) - 13%), calc(var(--secondary-lightness) + 68%));
    --secondary-400: hsl(calc(var(--secondary-hue) - 8), calc(var(--secondary-saturation) - 10%), calc(var(--secondary-lightness) + 12%));
    --secondary-500: hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness));
    --secondary-600: hsl(calc(var(--secondary-hue) + 1), calc(var(--secondary-saturation) + 3%), calc(var(--secondary-lightness) - 5%));
    --secondary-700: hsl(calc(var(--secondary-hue) - 6), var(--secondary-saturation), calc(var(--secondary-lightness) - 12%));
    --secondary-degree: 180deg;
    --secondary-gradient: linear-gradient( var(--secondary-degree), hsl(var(--secondary-hue), calc(var(--secondary-saturation) + 2%), calc(var(--secondary-lightness) - 1%)) 0%, hsl(var(--secondary-hue), calc(var(--secondary-saturation) - 10%), calc(var(--secondary-lightness) + 8%)) 100% );
}

/* Neutral */
:root {
    --neutral-50: hsla(0, 0%, 100%, 1);
    --neutral-100: hsla(210, 20%, 98%, 1);
    /*    --neutral-200: hsla(210, 26%, 95%, 1);*/
    --neutral-200: hsla(220, 14%, 96%, 1);
    --neutral-300: hsla(220, 13%, 91%, 1);
    --neutral-400: hsla(213, 11%, 84%, 1);
    --neutral-500: hsla(215, 9%, 65%, 1);
    --neutral-600: hsla(218, 8%, 46%, 1);
    --neutral-700: hsla(211, 12%, 34%, 1);
    --neutral-800: hsla(215, 18%, 27%, 1);
    --neutral-900: hsla(0, 0%, 9%, 1);
}

/* Success */
:root {
    --success-50: hsla(152, 55%, 94%, 1);
    --success-500: hsla(152, 82%, 39%, 1);
    --success-700: hsl(155, 44%, 39%);
}

/* Danger */
:root {
    --danger-50: hsla(3, 90%, 96%, 1);
    --danger-100: hsla(4, 85%, 87%, 1);
    --danger-500: hsla(4, 86%, 58%, 1);
    --danger-700: hsla(4, 76%, 40%, 1);
}

/* Warning */
:root {
    --waring-50: hsla(37, 92%, 95%, 1);
    --waring-100: hsla(34, 95%, 85%, 1);
    --waring-500: hsla(34, 94%, 50%, 1);
    --waring-600: hsla(28, 97%, 44%, 1);
}

/* Box Shadows */
:root {
    --kit-shadow: 0 0.1875rem 1.3125rem 0 hsla(0, 0%, 0%, 0.16);
    --input-shadow: 0 0.125rem 0.25rem 0 hsla(0, 0%, 0%, 0.06);
    --div-shadow: 0 0.25rem 0.375rem 0 hsla(0, 0%, 4%, 0.08);
}

/* lavender */
:root {
    --lavender-600: hsla(274, 37%, 41%, 1);
}

/* info */
:root {
    --info-50: hsla(206, 100%, 97%, 1);
}

/* General */
:root {
    /* DON'T use these CSS custom properties, use the others (--ff,--fb) ONLY */
    --font-family: 'ReadexPro', system-ui, serif;
    --font-family-Bold: 'ReadexPro-Bold', system-ui, serif;
    --ff: 'ReadexPro', system-ui, serif;
    --fb: 'ReadexPro-Bold', system-ui, serif;
    --overlay: hsla(0deg, 0%, 0%, 0.7);
    --overlay-light: hsla(0deg, 0%, 0%, 0.4);
    --lg-height: 45px;
    --md-height: 36px;
    --xs-height: 32px;
    --qMap-header-height: 4rem;
    --qMap-header-top: 1rem;
    --qMap-logo-header-height: px(35);
    --qTech-logo-footer-height: px(30);
    --location-info-bar-height: px(36);
    --top-tools-margin: 2.5rem;
}


/* ==================================================================================== */

/* Font Faces at-rules for Readex font */
@font-face {
    font-family: 'ReadexPro';
    src: url('../fonts/Readex_Pro/ReadexPro-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'ReadexPro-Bold';
    src: url('../fonts/Readex_Pro/ReadexPro-Bold.ttf') format('truetype');
}