/* 0 = blue */

/* using colors from Material Design v3 as default light theme  
** https://m3.material.io/styles/color/choosing-a-scheme
** see also Chrome color theme selection
*/

:root {
    
    --color-link-hover: #0d58d0;
    --border-color: #cfcfcf;
    --border-color-dark: #3f4042;
    --required: #8ab4f8;
    --required-dark: #047db7;
    --font-color: #282828;
    --background-color: #f3f4f6;
    --background-color-dark: #211f21;
    --background-color-container: #fff;
    --background-color-container-dark: #18181b;
    
    /* MD low emphasis, less important buttons */
    --background-color-1: #fff; 
    --color-1: #242227;
    --border-color-1: #bfbdc1;

    --background-color-1-dark: #3f4042; 
    --color-1-dark: #e3e3e3;
    --border-color-1-dark: #757575;    
    
    --background-color-1-hover: #e8eaed; 
    --color-1-hover: #242227;
    --border-color-1-hover: #747775;
    
    /* MD medium emphasis, medium important buttons */
    --background-color-2: #e8f0fe; 
    --color-2: #303135;
    --border-color-2: #e8f0fe;

    --background-color-2-dark: #6d7072; 
    --color-2-dark: #fefefe;
    --border-color-2-dark: #6d7072;
    
    --background-color-2-hover: #e8f0fe; 
    --color-2-hover: #377bd9;
    --border-color-2-hover: #a8c7fa;    

    /* MD high emphasis, primary action button */
    --background-color-3: #0b57d0;
    --color-3: #fff;
    --border-color-3: #0b57d0;

    --background-color-3-dark: #8ab4f8;
    --color-3-dark: #000000;
    --border-color-3-dark: #8ab4f8;
    
    --background-color-3-hover: #0b4dbb; 
    --color-3-hover: #fff;
    --border-color-3-hover: #0b4dbb;
    
    /* MD tonal, selected items */
    --background-color-4: #c7c7c8; 
    --color-4: #27282b;
    --border-color-4: #c7c7c8;

    --background-color-4-dark: #292a2d; 
    --color-4-dark: #a8c7fa;
    --border-color-4-dark: #047db7;
    
    /* MD forms */
    --background-color-5: #f2f2f2; 
    --background-color-5-dark: #2d2e33; 
    
    /*
    --border-radius: 10px;
    --border-radius-2: 15px;
    */
}