/* Recommended Tools
    Check accessibility for color combinations
    https://toolness.github.io/accessible-color-matrix/
*/

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('poppins-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'RobotoRegular';
    src: url('roboto-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'fa-solid';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("fa/webfonts/fa-solid-900.woff2") format("woff2"), url("fa/webfonts/fa-solid-900.ttf") format("truetype");
}
 
@font-face {
    font-family: 'fa-brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("fa/webfonts/fa-brands-400.woff2") format("woff2"), url("fa/webfonts/fa-brands-400.ttf") format("truetype");
}

:root {
    /* Theme colors */
    --black: #000000FF;
    --white: #FFFFFFFF;
    --grey: #555555FF; /* #777777 is low contrast (WCAG) */

    --octo-rounded-large: 10px;
    --octo-shadow-medium: 0 8px 16px 0 rgba(0, 0, 0, .08), 0 6px 10px 0 rgba(0, 0, 0, .02), 0 1px 4px 0 rgba(0, 0, 0, .02);
    
    --blue-midnight-dark: #070E14FF;
    --blue-midnight-darker: #0A202FFF;
    --blue-midnight: #10212FFF;
    --blue-midnight-lighter: #22425CFF;

    --navy-400: #7C98B4FF;
    --navy-200: #DAE2E9FF;
    --light-bg: #F9FAFAFF;

    --blue-grey-dark: #152B3DFF;
    --blue-gray-darker: #1F2F3CFF;
    --blue-grey-medium: #113049FF;
    --blue-grey-light: #274B66FF;
    --blue-grey-smoke: #C5E6FF66;
    
    --lightest-blue: #E5F4FFFF;
    --octo-blue: #0D79CEFF; /* Insufficient contrast for #0D80D8FF; */
    --octo-blue-lighter: #2F95E3FF;
    --octo-blue-lightest: #1FC0FFFF;
    --lilac: #9C6ADEFF;
    --green: #25D284FF;
    --light-green: #00FFA3FF;
    --red: #DC3545FF;

    --heading-font: 'Poppins', sans-serif;
    --body-font: 'RobotoRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --code-font: Consolas, monaco, monospace;

    --font-size-xlarge: 24px;
    --font-size-large: 20px;
    --font-size-regular: 18px;
    --font-size-medium: 16px;
    --font-size-small: 14px;

    --header-bg: var(--white);
    --header-icon-stroke: var(--blue-grey-light);
    --header-link-color: var(--octo-blue);
    --header-link-alt: var(--blue-gray-darker);
    --header-link-alt-bg: var(--blue-grey-smoke);

    --image-bg: var(--blue-grey-smoke);
    --content-bg: var(--white);
    
    --body-link-color: var(--octo-blue);
    --body-link-alt: var(--blue-grey-light);
    --menu-link-bg: var(--blue-grey-smoke);

    --gradient-start: var(--lilac);
    --gradient-end: var(--green);

    --icon-stroke: var(--white);
    --icon-fill: var(--blue-grey-light);

    --block-gap: 2rem;

    --header-pin: 0;
    --scroll-pad: 110px;

    --content-width: 78vw;
    --content-width-mobile: calc(100vw - 2rem);
    --navigation-width: 250px;
    --grid-max-width: 1250px;
    --grid-gap: 1rem;
    --grid-gap-main: 4rem;

    --standard-radius: 0.5rem;

    --bg-color-tab: var(--navy-200);
    --border-color-tab: var(--navy-200);
    --border-color-tab-active: var(--navy-400);
    --border-color-info: var(--octo-blue);
}

@media (prefers-color-scheme: dark) {
    :root {
        
    }
}