/*
  One place the whole site takes its colours from.

  Nothing below this file names a colour of its own. That is what makes the landing page, the
  support thread and the inventory panel read as one site rather than three that happen to share
  a domain - and it is what makes changing the look a change to one file.

  Both themes are here. The dark one is what the site opens as, following the reader's own
  setting, because that is what the panel these were merged from always was.
*/

:root {
  color-scheme: light dark;

  --bg: #f4f5f7;
  --panel: #ffffff;
  --line: #dfe2e7;
  --text: #1f2430;
  --dim: #5c6472;

  --accent: #d98a3a;
  --accent-strong: #c2762a;
  --on-accent: #17181c;

  --danger: #c8503c;
  --ok: #3f8b55;

  /* A ticket that is waiting on somebody. Its own colour rather than none: a status badge with
     no colour reads as no status, and "awaiting reply" is the one staff scan a list for. */
  --waiting: #3d82bd;
  --evidence: #8467bb;

  /* The colours a ticket form can be marked with. Named here rather than typed into the form,
     so both themes stay readable and the whole set can be retuned in one place. */
  --mark-red: #c8503c;
  --mark-amber: #d98a3a;
  --mark-green: #3f8b55;
  --mark-blue: #3d82bd;
  --mark-purple: #8467bb;

  --radius: 6px;
  --gap: 1rem;
  --page: 1200px;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The reader's own preference, unless the site has been told otherwise. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel: #1c1f26;
    --line: #2b3038;
    --text: #e6e8ec;
    /* Deliberately brighter than it looks like it needs to be: muted text on a dark panel
       reads as washed out long before it fails a contrast check. */
    --dim: #a3abb8;
    --on-accent: #16181c;
  }
}

/* And the site being told otherwise, which must win over the reader's setting in both
   directions - a toggle that only works one way is worse than none. */
:root[data-theme="dark"] {
  --bg: #14161a;
  --panel: #1c1f26;
  --line: #2b3038;
  --text: #e6e8ec;
  --dim: #a3abb8;
  --on-accent: #16181c;
}

:root[data-theme="light"] {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --line: #dfe2e7;
  --text: #1f2430;
  --dim: #5c6472;
  --on-accent: #17181c;
}