/*
    Graph Colors

    Moving them into a separate file to keep app.css lighter, since I would like to load it synchronously to avoid FOUC.
    This file is loaded asynchronously, so a flash of unstyled content (FOUT) may occur, but it would only affect graph
    content, which may anyway load with a delay, so not a big deal.

*/

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    LIGHT THEME 
    
*/

/* Tag colors */
html[data-theme="light"]:root {

    --tag-text: var(--color-white);
    --tag-text-inverted: var(--color-anthracit);

    --tag-true-background: var(--color-blue-dark);
    --tag-true-background-inverted: var(--color-white-95);
    --tag-true-text: var(--color-white);
    --tag-true-text-inverted: var(--color-anthracit);

    --tag-false-background: var(--color-blue-dark-20);
    --tag-false-background-inverted: var(--color-white-30);
    --tag-false-text: var(--color-anthracit);
    --tag-false-text-inverted: var(--color-white);

    --tag-color-unavailable: var(--color-blue-dark-20);
    --tag-color-grey: var(--color-grey-300);
    --tag-color-grey-inverted: var(--color-grey-300);
    --tag-color-blue: var(--color-blue-light);
    --tag-color-blue-inverted: var(--color-blue-light-inverted);
    --tag-color-green: var(--color-green-light);
    --tag-color-green-inverted: var(--color-green-light-inverted);
    --tag-color-yellow: var(--color-yellow-medium);
    --tag-color-yellow-inverted: var(--color-yellow-medium);
    --tag-color-orange: var(--color-yellow-dark);
    --tag-color-orange-inverted: var(--color-yellow-dark-inverted);
    --tag-color-red: var(--color-orange-dark);
    --tag-color-red-inverted: var(--color-orange-dark);
    --tag-color-purple: var(--color-purple-light);
    --tag-color-purple-inverted: var(--color-purple-light);
    --tag-color-magenta: var(--color-pink-light);
    --tag-color-magenta-inverted: var(--color-pink-light);
    
    --tag-color-darkgrey: var(--color-grey-dark);
    --tag-color-darkgrey-inverted: var(--color-grey-dark);
    --tag-color-darkblue: var(--color-blue-dark);
    --tag-color-darkblue-inverted: var(--color-blue-dark);
    --tag-color-darkgreen: var(--color-green-dark);
    --tag-color-darkgreen-inverted: var(--color-green-dark);
    --tag-color-darkyellow: var(--color-orange-light);
    --tag-color-darkyellow-inverted: var(--color-orange-light);
    --tag-color-brown: var(--color-brown-dark);
    --tag-color-brown-inverted: var(--color-brown-dark);
    --tag-color-darkred: var(--color-green-dark);
    --tag-color-darkred-inverted: var(--color-green-dark);
    --tag-color-darkpurple: var(--color-purple-dark);
    --tag-color-darkpurple-inverted: var(--color-purple-dark);
    --tag-color-darkmagenta: var(--color-pink-dark);
    --tag-color-darkmagenta-inverted: var(--color-pink-dark);

}

/* Line, dot and range colors */
html[data-theme="light"]:root {

    --focus-ring: var(--color-blue-dark-20);
    --focus-wave: var(--color-blue-dark-50);

    --plot-color-grey: var(--color-grey-300);
    --plot-color-blue: var(--color-blue-light);
    --plot-color-green: var(--color-green-light);
    --plot-color-yellow: var(--color-yellow-medium);
    --plot-color-orange: var(--color-yellow-dark);
    --plot-color-brown: var(--color-brown-light);
    --plot-color-red: var(--color-orange-dark);
    --plot-color-purple: var(--color-purple-light);
    --plot-color-magenta: var(--color-pink-light);
    --plot-color-darkgrey: var(--color-grey-dark);
    --plot-color-darkblue: var(--color-blue-dark);
    --plot-color-darkgreen: var(--color-green-dark);
    --plot-color-darkyellow: var(--color-orange-light);
    --plot-color-darkorange: var(--color-orange-medium);
    --plot-color-darkbrown: var(--color-brown-dark);
    --plot-color-darkred: var(--color-red-dark);
    --plot-color-darkpurple: var(--color-purple-dark);
    --plot-color-darkmagenta: var(--color-pink-dark);
    --plot-color-transparent: none;

    --plot-color-primaryblue: var(--color-blue-dark);
    --plot-color-secondaryblue: var(--color-blue-light);
    --plot-color-paleblue: #ABBCE0;
    --plot-color-primarybrown: var(--color-brown-dark);
    --plot-color-secondarybrown: var(--color-brown-light);
    --plot-color-palebrown: #EFE2D8;
    --plot-color-primarygreen: var(--color-green-dark);
    --plot-color-secondarygreen: var(--color-green-light);
    --plot-color-palegreen: #CCE2AF;
    --plot-color-primarygrey: var(--color-grey-dark);
    --plot-color-secondarygrey: var(--color-grey-light);
    --plot-color-palegrey: #ECE9E7;
    --plot-color-primarymagenta: var(--color-pink-dark);
    --plot-color-secondarymagenta: var(--color-pink-light);
    --plot-color-palemagenta: #F6B4D3;
    --plot-color-primaryorange: #C25E00;
    --plot-color-secondaryorange: var(--color-yellow-dark);
    --plot-color-paleorange: #F9D9AB;
    --plot-color-primarypurple: var(--color-purple-dark);
    --plot-color-secondarypurple: var(--color-purple-light);
    --plot-color-palepurple: #EDB7E5;
    --plot-color-primaryred: var(--color-red-dark);
    --plot-color-secondaryred: var(--color-orange-dark);
    --plot-color-palered: #EFC2B6;
    --plot-color-primaryteal: #1E6568;
    --plot-color-secondaryteal: #34B3CB;
    --plot-color-paleteal: #BCE6EE;
    --plot-color-primaryyellow: var(--color-orange-light);
    --plot-color-secondaryyellow: var(--color-yellow-medium);
    --plot-color-paleyellow: #F8EEAB;

    --range-background-grey: rgba(196, 188, 183, 0.08);
    --range-background-blue: rgba(0, 159, 223, 0.08);
    --range-background-green: rgba(100, 167, 11, 0.08);
    --range-background-yellow: rgba(235, 203, 0, 0.08);
    --range-background-orange: rgba(237, 139, 0, 0.08);
    --range-background-red: rgba(207, 69, 32, 0.08);
    --range-background-purple: rgba(199, 36, 177, 0.08);
    --range-background-magenta: rgba(227, 28, 121, 0.08);
    --range-background-darkgrey: rgba(150, 140, 131, 0.08);
    --range-background-darkblue: rgba(0, 51, 160, 0.08);
    --range-background-darkgreen: rgba(44, 82, 52, 0.08);
    --range-background-darkyellow: rgba(237, 155, 51, 0.08);
    --range-background-brown: rgba(75, 54, 41, 0.08);
    --range-background-darkred: rgba(138, 42, 43, 0.08);
    --range-background-darkpurple: rgba(88, 44, 131, 0.08);
    --range-background-darkmagenta: rgba(131, 49, 119, 0.08);
    --range-background-transparent: none;

    --range-boundaries-grey: rgba(196, 188, 183, 0.4);
    --range-boundaries-blue: rgba(0, 159, 223, 0.4);
    --range-boundaries-green: rgba(100, 167, 11, 0.4);
    --range-boundaries-yellow: rgba(235, 203, 0, 0.4);
    --range-boundaries-orange: rgba(237, 139, 0, 0.4);
    --range-boundaries-red: rgba(207, 69, 32, 0.4);
    --range-boundaries-purple: rgba(199, 36, 177, 0.4);
    --range-boundaries-magenta: rgba(227, 28, 121, 0.4);
    --range-boundaries-darkgrey: rgba(150, 140, 131, 0.4);
    --range-boundaries-darkblue: rgba(0, 51, 160, 0.4);
    --range-boundaries-darkgreen: rgba(44, 82, 52, 0.4);
    --range-boundaries-darkyellow: rgba(237, 155, 51, 0.4);
    --range-boundaries-brown: rgba(75, 54, 41, 0.4);
    --range-boundaries-darkred: rgba(138, 42, 43, 0.4);
    --range-boundaries-darkpurple: rgba(88, 44, 131, 0.4);
    --range-boundaries-darkmagenta: rgba(131, 49, 119, 0.4);
    --range-boundaries-transparent: none;

}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    DARK THEME 
    
*/

/* Tag colors */
html[data-theme="dark"]:root {

    --tag-text: var(--color-white);
    --tag-text-inverted: var(--color-anthracit);

    --tag-true-background: var(--color-blue-medium);
    --tag-true-background-inverted: var(--color-white-95);
    --tag-true-text: var(--color-white);
    --tag-true-text-inverted: var(--color-anthracit);

    --tag-false-background: var(--color-blue-medium-25); /* hsl(197, 50%, 66%, 0.75); */
    --tag-false-background-inverted: var(--color-white-30);
    --tag-false-text: var(--color-white-50);
    --tag-false-text-inverted: var(--color-white);

    --tag-color-unavailable: #191924;
    --tag-color-grey: var(--color-grey-300);
    --tag-color-grey-inverted: var(--color-grey-300);
    --tag-color-blue: var(--color-blue-light);
    --tag-color-blue-inverted: var(--color-blue-light-inverted);
    --tag-color-green: var(--color-green-light);
    --tag-color-green-inverted: var(--color-green-light-inverted);
    --tag-color-yellow: var(--color-yellow-medium);
    --tag-color-yellow-inverted: var(--color-yellow-medium);
    --tag-color-orange: var(--color-yellow-dark);
    --tag-color-orange-inverted: var(--color-yellow-dark-inverted);
    --tag-color-red: var(--color-orange-dark);
    --tag-color-red-inverted: var(--color-orange-dark);
    --tag-color-purple: var(--color-purple-light);
    --tag-color-purple-inverted: var(--color-purple-light);
    --tag-color-magenta: var(--color-pink-light);
    --tag-color-magenta-inverted: var(--color-pink-light);
    
    --tag-color-darkgrey: var(--color-grey-dark);
    --tag-color-darkgrey-inverted: var(--color-grey-dark);
    --tag-color-darkblue: var(--color-blue-dark);
    --tag-color-darkblue-inverted: var(--color-blue-dark);
    --tag-color-darkgreen: var(--color-green-dark);
    --tag-color-darkgreen-inverted: var(--color-green-dark);
    --tag-color-darkyellow: var(--color-orange-light);
    --tag-color-darkyellow-inverted: var(--color-orange-light);
    --tag-color-brown: var(--color-brown-dark);
    --tag-color-brown-inverted: var(--color-brown-dark);
    --tag-color-darkred: var(--color-green-dark);
    --tag-color-darkred-inverted: var(--color-green-dark);
    --tag-color-darkpurple: var(--color-purple-dark);
    --tag-color-darkpurple-inverted: var(--color-purple-dark);
    --tag-color-darkmagenta: var(--color-pink-dark);
    --tag-color-darkmagenta-inverted: var(--color-pink-dark);

}

/* Line, dot and range colors */
html[data-theme="dark"]:root {

    --focus-ring: var(--color-blue-dark-20);
    --focus-wave: var(--color-blue-dark-50);

    --plot-color-grey: var(--color-grey-300);
    --plot-color-blue: var(--color-blue-light);
    --plot-color-green: var(--color-green-light);
    --plot-color-yellow: var(--color-yellow-medium);
    --plot-color-orange: var(--color-yellow-dark);
    --plot-color-brown: var(--color-brown-light);
    --plot-color-red: var(--color-orange-dark);
    --plot-color-purple: var(--color-purple-light);
    --plot-color-magenta: var(--color-pink-light);
    --plot-color-darkgrey: var(--color-grey-dark);
    --plot-color-darkblue: var(--color-blue-medium);
    --plot-color-darkgreen: var(--color-green-medium);
    --plot-color-darkyellow: var(--color-orange-light);
    --plot-color-darkorange: var(--color-orange-medium);
    --plot-color-darkbrown: var(--color-brown-dark);
    --plot-color-darkred: var(--color-red-dark);
    --plot-color-darkpurple: var(--color-purple-dark);
    --plot-color-darkmagenta: var(--color-pink-dark);
    --plot-color-transparent: none;


    --plot-color-primaryblue: var(--color-blue-light);
    --plot-color-secondaryblue: var(--color-blue-medium);
    --plot-color-paleblue: #009FDF80;
    --plot-color-primarybrown: var(--color-brown-light);
    --plot-color-secondarybrown: var(--color-brown-dark);
    --plot-color-palebrown: #EFE2D880;
    --plot-color-primarygreen: var(--color-green-light);
    --plot-color-secondarygreen: var(--color-green-dark);
    --plot-color-palegreen: #CCE2AF80;
    --plot-color-primarygrey: var(--color-grey-light);
    --plot-color-secondarygrey: var(--color-grey-dark);
    --plot-color-palegrey: #ECE9E780;
    --plot-color-primarymagenta: var(--color-pink-light);
    --plot-color-secondarymagenta: var(--color-pink-dark);
    --plot-color-palemagenta: #F6B4D380;
    --plot-color-primaryorange: var(--color-yellow-dark);
    --plot-color-secondaryorange: #C25E0080;
    --plot-color-paleorange: #F9D9AB80;
    --plot-color-primarypurple: var(--color-purple-light);
    --plot-color-secondarypurple: var(--color-purple-dark);
    --plot-color-palepurple: #EDB7E580;
    --plot-color-primaryred: var(--color-orange-dark);
    --plot-color-secondaryred: var(--color-red-dark);
    --plot-color-palered: #EFC2B680;
    --plot-color-primaryteal: #34B3CB;
    --plot-color-secondaryteal: #1E6568;
    --plot-color-paleteal: #BCE6EE80;
    --plot-color-primaryyellow: var(--color-yellow-medium);
    --plot-color-secondaryyellow: var(--color-orange-light);
    --plot-color-paleyellow: #F8EEAB80;


    --range-background-grey: rgba(221, 217, 217, 0.16);
    --range-background-blue: rgba(0, 118, 207, 0.16);
    --range-background-green: rgba(148, 216, 14, 0.16);
    --range-background-yellow: rgba(255, 222, 10, 0.16);
    --range-background-orange: rgba(237, 155, 51, 0.16);
    --range-background-red: rgba(227, 6, 19, 0.16);
    --range-background-purple: rgba(88, 44, 131, 0.16);
    --range-background-magenta: rgba(131, 49, 119, 0.16);
    --range-background-darkgrey: rgba(196, 188, 183, 0.16);
    --range-background-darkblue: rgba(0, 159, 223, 0.16);
    --range-background-darkgreen: rgba(100, 167, 11, 0.16);
    --range-background-darkyellow: rgba(235, 203, 0, 0.16);
    --range-background-brown: rgba(75, 54, 41, 0.16);
    --range-background-darkred: rgba(207, 69, 32, 0.16);
    --range-background-darkpurple: rgba(199, 36, 177, 0.16);
    --range-background-darkmagenta: rgba(227, 28, 121, 0.16);
    --range-background-transparent: none;

    --range-boundaries-grey: rgba(221, 217, 217, 0.5);
    --range-boundaries-blue: rgba(0, 118, 207, 0.5);
    --range-boundaries-green: rgba(148, 216, 14, 0.5);
    --range-boundaries-yellow: rgba(255, 222, 10, 0.5);
    --range-boundaries-orange: rgba(237, 155, 51, 0.5);
    --range-boundaries-red: rgba(207, 69, 32, 0.5);
    --range-boundaries-purple: rgba(88, 44, 131, 0.5);
    --range-boundaries-magenta: rgba(131, 49, 119, 0.5);
    --range-boundaries-darkgrey: rgba(196, 188, 183, 0.5);
    --range-boundaries-darkblue: rgba(0, 159, 223, 0.5);
    --range-boundaries-darkgreen: rgba(100, 167, 11, 0.5);
    --range-boundaries-darkyellow: rgba(235, 203, 0, 0.5);
    --range-boundaries-brown: rgba(75, 54, 41, 0.5);
    --range-boundaries-darkred: rgba(207, 69, 32, 0.5);
    --range-boundaries-darkpurple: rgba(199, 36, 177, 0.5);
    --range-boundaries-darkmagenta: rgba(227, 28, 121, 0.5);
    --range-boundaries-transparent: none;

}