/* Palette: every colour on the site. Loaded first, by every page (including login). */

:root {
    /* Palette. Every colour on the site comes from these; edit colours here.
       Six neutrals with a light and a dark value, three signal colours, the heatmap scale
       and the accent. (Chart series colours are chart_colors in app/config.py.) */
    --bgsite-light:          #faf9f5; /* site background */
    --bg-panels-light:       #f0eee6; /* panels: selectors, chart dropdowns, hovers */
    --borders-light:         #e0e0e0; /* all lines: borders, dividers, chart grid and axes */
    --bgbutton-light:        #ffffff; /* asset grid, dropdowns, buttons */
    --text-light:            #000000; /* main text */
    --text-secondary-light:  #666666; /* subtitles, headers, unselected tabs, icons */
    --logo-light:            #2a2a2a; /* the KapitalEconomics logo: a little softer than the text */
    --bgsite-dark:           #141413;
    --bg-panels-dark:        #1a1918;
    --borders-dark:          #3d3d3a;
    --bgbutton-dark:         #2e2d2a;
    --text-dark:             #e8e8e8;
    --text-secondary-dark:   #aaaaaa;
    --positive:              #4caf7a; /* gains, "healthy" */
    --negative:              #d9534f; /* losses, "concern", delete */
    --caution:               #e0a030; /* "caution", stale data */
    /* Heatmap scale (same in both themes): Warnings heatmap, market pulse and outlier
       badges, right-pane heatmap and outliers, Fibonacci levels. warnings.py hands out these
       names, so this is the only place the colours are set. */
    --heat-green-strong:     #a8e6a3;
    --heat-green:            #d4edda;
    --heat-yellow:           #ffeeba;
    --heat-red:              #f8d7da;
    --heat-red-strong:       #f5a3a3;
    --heat-none:             #f8f9fa; /* no data */
    --accent-light:          #d8edf8; /* selected: asset grid item, toggles, Fibonacci buttons */
    --accent-border-light:   #c8dfe8; /* outline of the accent */
    --accent-dark:           #1a4a6a;
    --accent-border-dark:    #1a4a6a;

    /* Theme-following names: light values here, dark values below */
    --bgsite:              var(--bgsite-light);
    --bg-panels:           var(--bg-panels-light);
    --borders:             var(--borders-light);
    --bgbutton:            var(--bgbutton-light);
    --color-text:          var(--text-light);
    --color-text-secondary:var(--text-secondary-light);
    --logo:                var(--logo-light);
    --accent:              var(--accent-light);
    --accent-border:       var(--accent-border-light);
}


[data-theme="dark"] {
    --bgsite:              var(--bgsite-dark);
    --bg-panels:           var(--bg-panels-dark);
    --borders:             var(--borders-dark);
    --bgbutton:            var(--bgbutton-dark);
    --color-text:          var(--text-dark);
    --color-text-secondary:var(--text-secondary-dark);
    --logo:                var(--text-dark);
    --accent:              var(--accent-dark);
    --accent-border:       var(--accent-border-dark);
}