/*
    Typography styles and font imports

    I define anything font related in this file so that we can load it asynchronously while at the same time colours and
    base styles are in app.css which is loaded synchronously to avoid FOUC.

    Normally, Libre Franklin is Hempel's corporate font but for tabular numbers we use Nunito Sans as it allows monospaced
    digits, making it easier to align numbers in tables and get a quick impression of a value's magnitude compared to
    others.

    Both fonts are from Google Fonts (https://fonts.google.com/) and performance measurements suggest a loading time of
    about 250ms under perfect conditions, i.e. a quarter of a second, which - unless loaded asynchronously - is a quarter
    of a second adding to the initial render delay. Fetching them asynchroneously will most likely cause a flash of
    unstyled text (FOUT). Let's see what is more or less acceptable.
     
*/

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200;6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&display=swap');


/* 

    Background images 
    
*/

html[data-theme="light"]:root {
    --swirl-background: url('/swirl_light.svg');
}

html[data-theme="dark"]:root {
    --swirl-background: url('/swirl_dark.svg');
}