/* Copied from atlas/web/momus.css (lines 1-81: the Momus palette and its roles, light and dark), so
   zorgmonitor looks like the atlas apps without being one. Keep in step by hand. */
/* The Momus look of every atlas app (woonkaart, buurtkaart), in the visual language of momusmedia.nl: paper and ink, a book
   serif for headings over a plain sans, flat blocks of mint and thistle, square
   corners for blocks, round pills for tags and small buttons, 1px ink rules, and
   colour per the Momus Brandbook V.01 (March 2025): Paper, Grey, Ink and Mint are
   primary, Archive, Thistle and Green secondary; text on any colour is Paper or Ink,
   and a choice that is on wears Mint with Ink text. STK Bureau is Momus's licensed
   typeface; it is used when installed, otherwise the free Newsreader and
   Hanken Grotesk stand in. Data colours (heatmap, histograms) are not themed. */
:root {
  color-scheme: light;
  /* Momus palette */
  --m-ink: #141414;
  --m-paper: #FBFBFB;
  --m-grey: #F1F0EF;
  --m-archive: #EEE5E3;
  --m-green: #335E4D;
  --m-mint: #A8DCAB;
  --m-thistle: #E3CFED;

  /* roles (the script reads --grid, --muted, --accent, --accent-wash, --ink-2) */
  --page: var(--m-paper);
  --surface: var(--m-paper);
  --surface-2: var(--m-grey);
  --block: var(--m-mint);
  --block-2: var(--m-thistle);
  --card: var(--m-archive);
  --ink: var(--m-ink);
  --ink-2: #3d3d3b;
  --muted: #6f6e6a;
  --rule: var(--m-ink);
  --rule-soft: #cfcdc8;      /* between the panel's sections; the header's rule and Bronnen's stay ink */
  --grid: #dcdad6;
  --axis: #b9b7b2;
  --accent: var(--m-green);
  --on-accent: var(--m-paper);
  --accent-wash: var(--m-mint);
  --bar: #141414;            /* filter histograms: a light-to-#141414 gradient, not the picked heatmap colour; fixed ramps colour their own bars */
  /* the syntax editor is dark in both themes, highlighted in the Momus colours */
  --code-bg: var(--m-ink); --code-ink: var(--m-paper); --code-edge: var(--m-ink); --code-muted: #8f8d88;
  --code-field: var(--m-mint); --code-setting: #8ac79d; --code-value: #c9a6dd; --code-base: var(--m-archive); --code-bad: #f2a29c;
  --picked: var(--m-mint);   /* a choice that is on: Mint under Ink */
  --on-picked: var(--m-ink);
  --hover: var(--m-grey);
  --err: #b3261e;
  --shadow: rgba(0, 0, 0, 0.4);
  --edge: transparent;
  --serif: "STK Bureau Serif", "Newsreader", Georgia, serif;
  --sans: "STK Bureau Sans", "Hanken Grotesk", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Momus in the dark: warm near-blacks instead of pure black, paper-white ink at
       slightly less than full strength, rules as soft lines, mint as the accent, and
       archive and thistle as deep tints of themselves rather than inverted pastels. */
    --page: #141413; --surface: #1c1c1b; --surface-2: #262625; --card: #2c2725;
    --block: #1f3a2f; --block-2: #2e2633;
    --ink: #f3f2ef; --ink-2: #cfcdc8; --muted: #9a9893;
    --rule: rgba(243, 242, 239, 0.42); --rule-soft: rgba(243, 242, 239, 0.16); --grid: #353533; --axis: #55544f;
    --accent: var(--m-mint); --on-accent: var(--m-ink); --accent-wash: rgba(168, 220, 171, 0.2); --bar: #cfcdc8;
    --picked: var(--m-mint); --on-picked: var(--m-ink); --hover: #2a2a29;
    --err: #f2a29c; --shadow: rgba(0, 0, 0, 0.75); --edge: #333331; --icon-filter: invert(0.95);
    --code-bg: #0c0c0b; --code-edge: rgba(243, 242, 239, 0.42);
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    /* Momus in the dark: warm near-blacks instead of pure black, paper-white ink at
       slightly less than full strength, rules as soft lines, mint as the accent, and
       archive and thistle as deep tints of themselves rather than inverted pastels. */
    --page: #141413; --surface: #1c1c1b; --surface-2: #262625; --card: #2c2725;
    --block: #1f3a2f; --block-2: #2e2633;
    --ink: #f3f2ef; --ink-2: #cfcdc8; --muted: #9a9893;
    --rule: rgba(243, 242, 239, 0.42); --rule-soft: rgba(243, 242, 239, 0.16); --grid: #353533; --axis: #55544f;
    --accent: var(--m-mint); --on-accent: var(--m-ink); --accent-wash: rgba(168, 220, 171, 0.2); --bar: #cfcdc8;
    --picked: var(--m-mint); --on-picked: var(--m-ink); --hover: #2a2a29;
    --err: #f2a29c; --shadow: rgba(0, 0, 0, 0.75); --edge: #333331; --icon-filter: invert(0.95);
    --code-bg: #0c0c0b; --code-edge: rgba(243, 242, 239, 0.42);
}

* { box-sizing: border-box; }