/* A shop's accent colour, where it is not the blue the two stylesheets start
   with - see webapp/branding.py. Loaded by the desk's pages and by the
   counter alike, as reading.css is, so the two cannot come to differ.

   Each colour is three values on a light page and three on a dark one: the
   accent, the soft ground a lit tab or a hovered link sits on, and the ink
   that goes on the accent itself. Every pairing was checked at 4.5:1 or
   better - white on the accent, the accent on its soft ground and on a panel,
   and in the dark the dark ink on the brighter accent, which cannot carry
   white.

   Written for the page as a whole and for any one element, so the Branding
   page can show each colour on its own swatch. The dark rules name both
   attributes: on the <html> tag they have to outrank the stylesheets' own
   dark accent, which the light rules only tie with. */
:root[data-accent="teal"], [data-accent="teal"] {
  --accent: #00696B; --accent-soft: #DDF2F1; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="teal"], [data-theme="dark"] [data-accent="teal"] {
  --accent: #6FD0D2; --accent-soft: #12302F; --on-accent: #12161B;
}
:root[data-accent="green"], [data-accent="green"] {
  --accent: #0B6B3A; --accent-soft: #E2F3E8; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="green"], [data-theme="dark"] [data-accent="green"] {
  --accent: #7FD3A2; --accent-soft: #14301F; --on-accent: #12161B;
}
:root[data-accent="violet"], [data-accent="violet"] {
  --accent: #5B2DB5; --accent-soft: #ECE6FA; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="violet"], [data-theme="dark"] [data-accent="violet"] {
  --accent: #B9A3F5; --accent-soft: #271C45; --on-accent: #12161B;
}
:root[data-accent="slate"], [data-accent="slate"] {
  --accent: #2F3E55; --accent-soft: #E6EAF0; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="slate"], [data-theme="dark"] [data-accent="slate"] {
  --accent: #A9B7CC; --accent-soft: #1F2733; --on-accent: #12161B;
}
/* The blue again, for one element only: on a page drawn in another colour,
   the Branding page's blue swatch still has to be blue. */
[data-accent="blue"] { --accent: #0000FF; --accent-soft: #E6E6FF; --on-accent: #FFFFFF; }
[data-theme="dark"] [data-accent="blue"] { --accent: #8FA8FF; --accent-soft: #1C2440; --on-accent: #12161B; }