@font-face {
    font-family: 'Roboto';
    src: url('/assets/fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Raleway';
    src: url('/assets/fonts/Raleway-VariableFont_wght.ttf');
}

/* Fonts */
:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Raleway", sans-serif;
    --nav-font: "Raleway", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff;
    /* Background color for the entire website, including individual sections */
    --default-color: #0A1128;
    /* Default color used for the majority of the text content across the entire website */
    --heading-color: #001F54;
    /* Color for headings, subheadings and title throughout the website */
    --accent-color: #1282A2;
    /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #FEFCFB;
    /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff;
    /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}