/*
 *  Contains all variables that are provided from the designer's styleguide
 */

:root {
    /* Grid widths */
    --xxl-tablet: 1500px;
    --xl-tablet: 1366px;
    --lg-tablet: 1200px;
    --tablet: 1024px;
    --sm-tablet: 767px;
    --xsm-tablet: 643px;
    --mobile: 500px;

    /* Colors */
    --main-color: var(--neutral-600);
    --secondary-color: var(--blue);
    --link-color: var(--secondary-color);
    --link-color-hover: var(--main-color);
    --link-color-visited: var(--link-color);
    --title-link-color: var(--main-color);
    --title-link-hover: var(--main-color);
    --placeholder-text: #7e8083;

    --black: #000;
    --white: #fff;
    --charcoal: #333;
    --gray: var(--neutral);
    --orange: var(--blue);

    --black-heading: #1E1E24;

    --blue: #0031A7; /* --blue-500 */
    --blue-50: #EDF3FF;
    --blue-100: #D0DEFF;
    --blue-200: #739CFF;
    --blue-300: #457BFF;
    --blue-400: #1A5DFF;
    --blue-500: #0031A7;
    --blue-600: #00257D;
    --blue-700: #001F6A;
    --blue-800: #00164C;
    --blue-900: #000C2A;

    --fuchsia: #9C26C1; /* --fuchsia-500 */
    --fuchsia-50: #FBF6FD;
    --fuchsia-100: #F9F1FC;
    --fuchsia-200: #F6E8FA;
    --fuchsia-300: #E4B9F1;
    --fuchsia-400: #C05CDF;
    --fuchsia-500: #9C26C1;
    --fuchsia-600: #751D91;
    --fuchsia-700: #4E1361;
    --fuchsia-800: #3B0E49;
    --fuchsia-900: #2C0A37;

    --secondary-light: #D1E2E4; /* --secondary-light-500 */
    --secondary-light-50: #F9FBFC;
    --secondary-light-100: #F3F8F8;
    --secondary-light-200: #ECF3F4;
    --secondary-light-300: #E6EFF0;
    --secondary-light-400: #DCE9EA;
    --secondary-light-500: #D1E2E4;
    --secondary-light-600: #AFCCD0;
    --secondary-light-700: #8CB7BC;
    --secondary-light-800: #477379;
    --secondary-light-900: #2C484C;

    --teal: #2ECDDC; /* --teal-500 */
    --teal-50: #F2FCFD;
    --teal-100: #D2F4F7;
    --teal-200: #B1ECF2;
    --teal-300: #76DEE8;
    --teal-400: #48D3E0;
    --teal-500: #2ECDDC;
    --teal-600: #21B9C7;
    --teal-700: #18848E;
    --teal-800: #0F5259;
    --teal-900: #093338;

    --neutral: #333F4C; /* --neutral-700 */
    --neutral-50: #FAFBFC;
    --neutral-100: #F2F4F6;
    --neutral-200: #E5E9EC;
    --neutral-300: #BAC5CD;
    --neutral-400: #A3B2BD;
    --neutral-500: #8598A7;
    --neutral-600: #4D5F72;
    --neutral-700: #333F4C;
    --neutral-800: #262F39;
    --neutral-900: #181D24;

    --brand-gradient-image: url('../images/brand-gradient.png');
    --brand-gradient-css: linear-gradient(90deg, #2db9a0 0%, #4150b4 100%);
    --left-right-fuchsia-blue-gradient: var(--brand-gradient-image) center / cover no-repeat;
    --blue-fuschia-upper-left-diagonal-right-gradient: var(--brand-gradient-image) center / cover no-repeat;
    --cyan-white-diagnoal-gradient: var(--brand-gradient-image) center / cover no-repeat;

    /* Fonts */
    --FontAwesome: 'Font Awesome 5 Pro';
    --FontAwesomeBrand: 'Font Awesome 5 Brands';
    --open-sans: 'aptos', sans-serif;
    --lora: 'aptos', sans-serif;
    --aptos: 'aptos', sans-serif;
    --aptos-display: 'aptos-display', sans-serif;
    --aptos-narrow: 'aptos-narrow', sans-serif;
    --primary-site-font: var(--aptos);
    --secondary-site-font: var(--aptos);

    /* Font Weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semi-bold: 600;
    --weight-bold: 700;
    --weight-extra-bold: 800;
    --weight-black: 900;

    /* Widths */
    /* Not used */
    --max-site-width: 2600px;
    --full-width: 100%;
    --site-width: 1540px;
    --lg-site-width: 1420px;
    --med-site-width: 1200px;
    --sm-site-width: 975px;
    --xsm-site-width: 760px;
    --sidebar-width: 360px;

    /* Site Width Padding */
    --site-width-padding: 20px;
}