/* ========================================
   Fonts — Google Sans
   ======================================== */

:root {
    --black: #26231b;

    --white: #ffffff;
    --white-rgb: 255, 255, 255;

    --yellow: #ffc107;
    --yellow-rgb: 255, 193, 7;
    --dark-yellow: #d57e00;

    --lighter-grey: #f8f8f8;
    --lighter-grey-rgb: 248, 248, 248;
    --light-grey: #efefef;
    --grey: #bdbdbd;
    --dark-grey: #858585;

    --dark-blue: #02081b;
    --dark-blue-rgb: 2, 8, 27;

}

/* Regular */
@font-face {
    font-family: 'Google Sans';
    src: url('../fonts/woff2/GoogleSans-Regular.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans-Regular.woff') format('woff'),
         url('../fonts/static/GoogleSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('../fonts/woff2/GoogleSans-Italic.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans-Italic.woff') format('woff'),
         url('../fonts/static/GoogleSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Google Sans';
    src: url('../fonts/woff2/GoogleSans-Medium.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans-Medium.woff') format('woff'),
         url('../fonts/static/GoogleSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('../fonts/woff2/GoogleSans-MediumItalic.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans-MediumItalic.woff') format('woff'),
         url('../fonts/static/GoogleSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* SemiBold */
@font-face {
    font-family: 'Google Sans';
    src: url('../fonts/woff2/GoogleSans-SemiBold.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans-SemiBold.woff') format('woff'),
         url('../fonts/static/GoogleSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('../fonts/woff2/GoogleSans-SemiBoldItalic.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans-SemiBoldItalic.woff') format('woff'),
         url('../fonts/static/GoogleSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Google Sans';
    src: url('../fonts/woff2/GoogleSans-Bold.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans-Bold.woff') format('woff'),
         url('../fonts/static/GoogleSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('../fonts/woff2/GoogleSans-BoldItalic.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans-BoldItalic.woff') format('woff'),
         url('../fonts/static/GoogleSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ---- 17pt optical size variant ---- */

/* Regular */
@font-face {
    font-family: 'Google Sans 17pt';
    src: url('../fonts/woff2/GoogleSans_17pt-Regular.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans_17pt-Regular.woff') format('woff'),
         url('../fonts/static/GoogleSans_17pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans 17pt';
    src: url('../fonts/woff2/GoogleSans_17pt-Italic.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans_17pt-Italic.woff') format('woff'),
         url('../fonts/static/GoogleSans_17pt-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Google Sans 17pt';
    src: url('../fonts/woff2/GoogleSans_17pt-Medium.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans_17pt-Medium.woff') format('woff'),
         url('../fonts/static/GoogleSans_17pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans 17pt';
    src: url('../fonts/woff2/GoogleSans_17pt-MediumItalic.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans_17pt-MediumItalic.woff') format('woff'),
         url('../fonts/static/GoogleSans_17pt-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* SemiBold */
@font-face {
    font-family: 'Google Sans 17pt';
    src: url('../fonts/woff2/GoogleSans_17pt-SemiBold.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans_17pt-SemiBold.woff') format('woff'),
         url('../fonts/static/GoogleSans_17pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans 17pt';
    src: url('../fonts/woff2/GoogleSans_17pt-SemiBoldItalic.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans_17pt-SemiBoldItalic.woff') format('woff'),
         url('../fonts/static/GoogleSans_17pt-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Google Sans 17pt';
    src: url('../fonts/woff2/GoogleSans_17pt-Bold.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans_17pt-Bold.woff') format('woff'),
         url('../fonts/static/GoogleSans_17pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans 17pt';
    src: url('../fonts/woff2/GoogleSans_17pt-BoldItalic.woff2') format('woff2'),
         url('../fonts/woff/GoogleSans_17pt-BoldItalic.woff') format('woff'),
         url('../fonts/static/GoogleSans_17pt-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}