/* 

    ROOT FONT DEFINITIONS 
    
    This file introduces app wide definitions for font styles. I have tried to implement as few as possible and
    some of these styles are only used in one or two places. But for now I don't want to cut down any further.

    At the same time I introduced better fallbacks for the font families, which will be in use until the web
    fonts are loaded. Also, I introduce theme dependent font weights, since light fonts on dark backgrounds appear
    bolder than dark fonts on light backgrounds.

    The font variables use the following size conventions (pixel height to size name mapping):

    10: xxsmall
    12: xsmall
    13: small
    14: medium
    15: large

    For titles

    16: small
    20: medium
    24: large
    32: x-large
    40: xx-large

    I intended to utilize em and rem units, but my current size steps do not translate well into those units.
    May give it another round at one point, especially if we introduce user adjustable font sizes.

    Font weights will be theme dependent. Initially I wanted to just define a set of weights for light and dark
    and refer to these in the font styles, but that did not map quite as I wanted to and I needed to pick different
    weights at different sizes. Instead, we now have a weight mapping and I manage one set of styles for dark
    and another for light.

    100: Thin
    200: Extra Light
    300: Light
    400: Regular
    500: Medium
    600: Semi Bold
    700: Bold
    800: Extra Bold
    900: Black

    TO DO: controls that work with inverted text for hover effects (going from light to dark or the other way
    around), need an default/inverted pair of font styles for some sizes.

*/

:root {

    --font-family-text: 'Libre Franklin', 'Segoe UI', 'Roboto', sans-serif;
    --font-family-numbers: 'Nunito Sans', 'Segoe UI', 'Roboto', sans-serif;

    --font-weight-thin: 100;
    --font-weight-xlight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --font-weight-black: 700;

}

:root[data-theme="light"] {

    --text-xxsmall-regular: var(--font-weight-regular) 10px var(--font-family-text);        /* small ticks for dense axis and copyright notice in map */

    --text-xsmall-regular: var(--font-weight-medium) 12px var(--font-family-text);         /* button captions, footers, medium sized tick labels, subtitles */
    --text-xsmall-bold: var(--font-weight-bold) 12px var(--font-family-text);               /* map legend expander button */

    --text-small-thin: var(--font-weight-regular) 13px var(--font-family-text);               /* Placeholder text input fields */
    --text-small-regular: var(--font-weight-regular) 13px var(--font-family-text);           /* text input field content, inline labels for checkboxes and similar */
    --text-small-bold: var(--font-weight-bold) 13px var(--font-family-text);                /* inline labels selected options */

    --text-medium-thin: var(--font-weight-regular) 14px var(--font-family-text);            /* Text in tables, tick labels, values in plot/map popup */
    --text-medium-regular: var(--font-weight-medium) 14px var(--font-family-text);          /* Standard text for body text, links and element labels */
    --text-medium-medium: var(--font-weight-bold) 14px var(--font-family-text);             /* Bolder label fields in popups, bolder tick labels, and table row headers */
    --text-medium-bold: var(--font-weight-black) 14px var(--font-family-text);              /* Bold spans of labels and bold elements in body text */

    --text-large-medium: var(--font-weight-bold) 15px var(--font-family-text);              /* Used for table column captions and labels that need to stand out a bit more */
    --text-large-bold: var(--font-weight-black) 15px var(--font-family-text);               /* Used for bold parts of labels that need to stand out a bit more */

    --numbers-small-thin: var(--font-weight-regular) 14px var(--font-family-numbers);      /* Monospaced / tabular numbers in tables and body text */
    --numbers-medium-thin: var(--font-weight-regular) 15px var(--font-family-numbers);      /* Monospaced / tabular numbers in tables and body text */

    --title-xsmall-regular: var(--font-weight-medium) 14px var(--font-family-text);        /* Used for titles with less space, e.g. KPI panel titles */
    --title-small-bold: var(--font-weight-bold) 16px var(--font-family-text);               /* ... */
    --title-medium-thin: var(--font-weight-light) 18px var(--font-family-text);             /* Used for larger captions, such as error feedback */
    --title-medium-regular: var(--font-weight-regular) 18px var(--font-family-text);      /* Used for the majority of panel titles */
    --title-medium-bold: var(--font-weight-bold) 20px var(--font-family-text);          /* ... */
    --title-large-thin: var(--font-weight-light) 32px var(--font-family-text);              /* Used for the main part of front page title line, except the SHAPE Portal name */
    --title-large-bold: var(--font-weight-bold) 32px var(--font-family-text);               /* Large titles and values when space is sparse and large value display above histograms (currently not used) */
    --title-large-black: var(--font-weight-black) 32px var(--font-family-text);             /* Used for the main part of front page title line, the SHAPE Portal name */
    --title-xlarge-bold: var(--font-weight-black) 40px var(--font-family-text);             /* Used for large titles such as vessel and fleet names, values in KPI fields etc */

}

:root[data-theme="dark"] {

    --text-xxsmall-regular: var(--font-weight-regular) 10px var(--font-family-text);    /* small ticks for dense axis and copyright notice in map */

    --text-xsmall-regular: var(--font-weight-regular) 12px var(--font-family-text);     /* button captions, footers, medium sized tick labels, subtitles */
    --text-xsmall-bold: var(--font-weight-bold) 12px var(--font-family-text);           /* map legend expander button */

    --text-small-thin: var(--font-weight-xlight) 13px var(--font-family-text);            /* Placeholder text input fields */
    --text-small-regular: var(--font-weight-regular) 13px var(--font-family-text);      /* text input field content, inline labels for checkboxes and similar */
    --text-small-bold: var(--font-weight-bold) 13px var(--font-family-text);            /* inline labels selected options */

    --text-medium-thin: var(--font-weight-xlight) 14px var(--font-family-text);           /* Text in tables, tick labels, values in plot/map popup */
    --text-medium-regular: var(--font-weight-regular) 14px var(--font-family-text);     /* Standard text for body text, links and element labels */
    --text-medium-medium: var(--font-weight-medium) 14px var(--font-family-text);       /* Bolder label fields in popups, bolder tick labels, and table row headers */
    --text-medium-bold: var(--font-weight-bold) 14px var(--font-family-text);           /* Bold spans of labels and bold elements in body text */

    --text-large-medium: var(--font-weight-medium) 15px var(--font-family-text);        /* Used for table column captions and labels that need to stand out a bit more */
    --text-large-bold: var(--font-weight-bold) 15px var(--font-family-text);            /* Used for bold parts of labels that need to stand out a bit more */

    --numbers-small-thin: var(--font-weight-xlight) 14px var(--font-family-numbers);      /* Monospaced / tabular numbers in tables and body text */
    --numbers-medium-thin: var(--font-weight-xlight) 15px var(--font-family-numbers);     /* Monospaced / tabular numbers in tables and body text */

    --title-xsmall-regular: var(--font-weight-light) 14px var(--font-family-text);    /* Used for titles with less space, e.g. KPI panel titles */
    --title-small-bold: var(--font-weight-medium) 16px var(--font-family-text);         /* ... */
    --title-medium-thin: var(--font-weight-thin) 18px var(--font-family-text);          /* Used for larger captions, such as error feedback */
    --title-medium-regular: var(--font-weight-light) 18px var(--font-family-text);      /* Used for the majority of panel titles */
    --title-medium-bold: var(--font-weight-bold) 20px var(--font-family-text);          /* ... */
    --title-large-thin: var(--font-weight-thin) 32px var(--font-family-text);           /* Used for the main part of front page title line, except the SHAPE Portal name */
    --title-large-bold: var(--font-weight-bold) 32px var(--font-family-text);           /* Large titles and values when space is sparse and large value display above histograms (currently not used) */
    --title-large-black: var(--font-weight-black) 32px var(--font-family-text);         /* Used for the main part of front page title line, the SHAPE Portal name */
    --title-xlarge-bold: var(--font-weight-bold) 40px var(--font-family-text);          /* Used for large titles such as vessel and fleet names, values in KPI fields etc */

}


:root {

    --text-xxsmall-regular: var(--font-weight-regular) 10px var(--font-family-text);    /* small ticks for dense axis and copyright notice in map */

    --text-xsmall-regular: var(--font-weight-regular) 12px var(--font-family-text);     /* button captions, footers, medium sized tick labels, subtitles */
    --text-xsmall-bold: var(--font-weight-bold) 12px var(--font-family-text);           /* map legend expander button */

    --text-small-thin: var(--font-weight-thin) 13px var(--font-family-text);            /* Placeholder text input fields */
    --text-small-regular: var(--font-weight-regular) 13px var(--font-family-text);      /* text input field content, inline labels for checkboxes and similar */
    --text-small-bold: var(--font-weight-bold) 13px var(--font-family-text);            /* inline labels selected options */

    --text-medium-thin: var(--font-weight-thin) 14px var(--font-family-text);           /* Text in tables, tick labels, values in plot/map popup */
    --text-medium-regular: var(--font-weight-regular) 14px var(--font-family-text);     /* Standard text for body text, links and element labels */
    --text-medium-medium: var(--font-weight-medium) 14px var(--font-family-text);       /* Bolder label fields in popups, bolder tick labels, and table row headers */
    --text-medium-bold: var(--font-weight-bold) 14px var(--font-family-text);           /* Bold spans of labels and bold elements in body text */

    --text-large-medium: var(--font-weight-medium) 15px var(--font-family-text);        /* Used for table column captions and labels that need to stand out a bit more */
    --text-large-bold: var(--font-weight-bold) 15px var(--font-family-text);            /* Used for bold parts of labels that need to stand out a bit more */

    --numbers-medium-thin: var(--font-weight-thin) 15px var(--font-family-numbers);     /* Monospaced / tabular numbers in tables and body text */

    --title-small-bold: var(--font-weight-bold) 16px var(--font-family-text);           /* Used for titles with less space, e.g. KPI panel titles */
    --title-medium-thin: var(--font-weight-thin) 20px var(--font-family-text);          /* Used for larger captions, such as error feedback */
    --title-medium-bold: var(--font-weight-bold) 20px var(--font-family-text);          /* Used for the majority of panel titles */
    --title-large-thin: var(--font-weight-thin) 32px var(--font-family-text);           /* Used for the main part of front page title line, except the SHAPE Portal name */
    --title-large-bold: var(--font-weight-bold) 32px var(--font-family-text);           /* Large titles and values when space is sparse and large value display above histograms (currently not used) */
    --title-large-black: var(--font-weight-black) 32px var(--font-family-text);         /* Used for the main part of front page title line, the SHAPE Portal name */
    --title-xlarge-bold: var(--font-weight-bold) 40px var(--font-family-text);          /* Used for large titles such as vessel and fleet names, values in KPI fields etc */

}