/* Design tokens: Knauf colours (light + dark), type, radius, shadow, chart series. Everything else uses these variables. */
:root{
  /* Knauf (knauf.com/en-TZ): Knauf blue #0099DE, navy #003778, text #3C3C3C, greys #F4F4F4 / #D8D8D8.
     Navy carries buttons and active states (white text on Knauf blue is under 4.5:1); Knauf blue is the brand mark and highlights.
     Each colour is light-dark(light, dark): the theme (color-scheme below: Auto follows the computer, or the Light / Dark
     switch, ui.js setTheme) picks one, so every colour is written once. */
  --paper:light-dark(#F4F4F4,#14171A);
  --panel:light-dark(#FFFFFF,#1C2024);
  --panel-2:light-dark(#EEF1F4,#23282D);
  --line:light-dark(#D8D8D8,#2F363C);
  --line-strong:light-dark(#BBBBBB,#465059);
  --ink:light-dark(#3C3C3C,#E6E9E4);
  --ink-2:light-dark(#555555,#AEB6BE);
  --ink-3:light-dark(#707070,#7E8891);
  --brand:#0099DE;
  --accent:light-dark(#003778,#4DB8EA);
  --accent-ink:light-dark(#FFFFFF,#00142E);
  --accent-soft:light-dark(#E5F4FB,#0B2A3F);
  --accent-line:light-dark(#8FD0EF,#1F5576);
  --amber:light-dark(#9A6A12,#E0B25A);
  --amber-soft:light-dark(#F8EBD0,#3A2E14);
  --red:light-dark(#A83A3A,#E27B7B);
  --red-soft:light-dark(#F7E0E0,#3C1F1F);
  --blue:light-dark(#2D5C8F,#7FB0E6);
  --blue-soft:light-dark(#DEE9F5,#1C2E42);
  --shadow:0 1px 2px light-dark(rgba(20,30,25,.06),rgba(0,0,0,.4)), 0 8px 24px -12px light-dark(rgba(20,30,25,.18),rgba(0,0,0,.6));
  --radius:6px;
  --shell:light-dark(#003778,#0B1F38);  /* the top bar */
  --shell-h:56px;
  --sans:"Source Sans 3",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* charts: the Knauf IT Data Viz Style Guide (04/2023) colours.
   Series in its palette order: cyan, black, dark grey-blue, grey-blue 60%, grey-blue, grey, grey-blue 40%, 20%.
   Meaning colours (its Corporate Controlling set): current = cyan (--s1), previous year = grey (--s-ly),
   forecast / budget / target = grey-blue 40% (--s-fc; budget beside a forecast takes grey-blue, --s-bu),
   positive / negative marks = green / red (--pos / --neg), signal = yellow (--signal).
   --good / --bad colour TEXT (a +5% or a -3%): the guide's green and red darkened, so they stay readable on white.
   Dark mode (not in the guide): black turns white, the rest is kept. */
:root{
  --s1:#37a7e9;
  --s2:light-dark(#000000,#ffffff);
  --s3:#889caf;
  --s4:#c3d3e1;
  --s5:#9fb8ce;
  --s6:#808080;
  --s7:#d7e2ec;
  --s8:#ebf0f5;
  --s-ly:#808080;
  --s-fc:light-dark(#d7e2ec,#5b6b7a);
  --s-bu:light-dark(#9fb8ce,#889caf);
  --signal:#f0da5e;
  --pos:#8cb400;
  --neg:light-dark(#ff0000,#ff4d4d);
  --good:light-dark(#5f7a00,#a4d000);
  --bad:light-dark(#d00000,#ff6b6b);
  --grid:light-dark(#e1e0d9,#2c2c2a);
  --axis:light-dark(#c3c2b7,#383835);
  --tick:light-dark(#666666,#9aa3ab)}
/* native controls (scroll bars, date and month pickers, selects) follow the chosen theme too */
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}