/* 2023-12-11 This file has sitewide vf colors; they are loaded before base.css and vf_site.css, so can be used from those. */

/*Variables*/
/*https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
    background-color: var(--layer-0-background-color);
 */


:root {
    /*Color variables*/
    --special-auth-color: #6919b9;
    --deemphasized-text: #898989;

    /* Color variables taken from Velogic Studio theme - see LightThemeColors.xaml*/
    --accent-color: #0068a6;
    --accent-highlight-color: #00b9f2;
    --accent-intense-highlight-border-color: #009da6;
    /*Slightly darkened version of AccentColor (created for Adonis)*/
    --accent-interaction-color: #23628c;

    /*See LightThemeColors.xaml to see how these were derived*/
    --layer-0-background-color: #bfc4c7;
    --layer-1-background-color: #d3d8db;
    --layer-2-background-color: #e1e7eb;
    --layer-3-background-color: #f5fbff;
    
    /* Size/distance variables */
    /* (note that I found these so useful in Velogic Studio, I've copied the concept here') */

    /* Full margin is to separate different "areas" of the page */
    --vf-full-margin-size: 40 px;

    /* Mid margin is to separate things in the same "area" of the page, but not touching each other */
    --vf-mid-margin-size: 15px; /* Taken to match bootstrap margin-bottom on .table, because that looks about right */

    --vf-small-margin-size: 6px;

    --bootstrap-sm: 768;
    --bootstrap-md: 992;
    --bootstrap-lg: 1200;
}