/* Shared colors for SensorFlow.
 *
 * One source for the system monitor (static/dashboard/cockpit.css), the
 * fieldlab pages (static/dashboard/fieldlab.css) and the admin
 * (static/admin/sensorflow.css): they all style through --sf-*, so a color is
 * changed in one place. This file must be loaded before those stylesheets.
 *
 * Light is the base. Dark applies on an explicit choice — [data-theme="dark"]
 * on <html>, which static/base/theme.js writes on every dashboard page and
 * Django's admin for its own theme — and, on a page that does not decide for
 * itself, also when the operating system is dark. The exception works the other
 * way too: [data-theme="light"] switches the media query off, so a light choice
 * survives a dark system. Django's dark_mode.css does the same.
 */

:root {
  --sf-vlak: #ffffff;
  --sf-achtergrond: #f5f6f7;
  --sf-rand: #d9dcdf;
  --sf-tekst: #1c1f22;
  --sf-tekst-zwak: #61686f;
  --sf-accent: #2f6f4f;
  --sf-accent-zwak: #e6efe9;
  --sf-let-op: #8a5a00;
  --sf-let-op-zwak: #fbf1dd;
  --sf-fout: #a52222;
  --sf-fout-zwak: #fbe9e9;
  --sf-grijs: #8d949b;
  --sf-vlak-2: #eef0f2;

  /* Series of a chart (read by static/dashboard/dashboard.js): the same twelve
   * colors the light theme has always drawn. The dark block below lightens
   * them; a series keeps its family in both themes. */
  --sf-serie-1: #2f6f4f;
  --sf-serie-2: #2a5d9f;
  --sf-serie-3: #a35a1f;
  --sf-serie-4: #7a3f8f;
  --sf-serie-5: #1f7a7a;
  --sf-serie-6: #8f3f3f;
  --sf-serie-7: #5b6b1f;
  --sf-serie-8: #3f5f8f;
  --sf-serie-9: #8f6f1f;
  --sf-serie-10: #5f3f7f;
  --sf-serie-11: #1f5f3f;
  --sf-serie-12: #7f1f5f;
}

[data-theme="dark"] {
  --sf-vlak: #191d21;
  --sf-achtergrond: #101315;
  --sf-rand: #2d3339;
  --sf-tekst: #e3e7ea;
  --sf-tekst-zwak: #aab3bb;
  --sf-accent: #7fc9a3;
  --sf-accent-zwak: #1d2b24;
  --sf-let-op-zwak: #2c2517;
  --sf-let-op: #e0b25c;
  --sf-fout-zwak: #2e1c1c;
  --sf-fout: #e08585;
  --sf-grijs: #828a92;
  --sf-vlak-2: #1f2429;

  /* The same twelve families, lightened and spread over more than one step in
   * lightness: on this background each line keeps at least 5:1 contrast
   * against --sf-achtergrond and stays apart from the others. */
  --sf-serie-1: #8db09e;
  --sf-serie-2: #6a8ebc;
  --sf-serie-3: #bf8c62;
  --sf-serie-4: #a279b1;
  --sf-serie-5: #62a2a2;
  --sf-serie-6: #bc8c8c;
  --sf-serie-7: #8c9762;
  --sf-serie-8: #90a2be;
  --sf-serie-9: #bca979;
  --sf-serie-10: #9f8cb2;
  --sf-serie-11: #628f79;
  --sf-serie-12: #cca5bf;
}

/* The same dark values again for the system preference, for a page that does
 * not set a theme of its own (the admin in 'auto' mode). The series colors are
 * not repeated here: every page that draws a chart loads static/base/theme.js,
 * which writes data-theme and therefore always lands in the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sf-vlak: #191d21;
    --sf-achtergrond: #101315;
    --sf-rand: #2d3339;
    --sf-tekst: #e3e7ea;
    --sf-tekst-zwak: #aab3bb;
    --sf-accent: #7fc9a3;
    --sf-accent-zwak: #1d2b24;
    --sf-let-op-zwak: #2c2517;
    --sf-let-op: #e0b25c;
    --sf-fout-zwak: #2e1c1c;
    --sf-fout: #e08585;
    --sf-grijs: #828a92;
    --sf-vlak-2: #1f2429;
  }
}