/* 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. */
/* The pharmacy colours (KIT-160), from Piktochart's pharmacy palettes. Sea
   blue also answers to slate, which it replaced, so a counter still holding
   slate from before its next word with the server is drawn in it. */
:root[data-accent="teal"], [data-accent="teal"] {
  --accent: #107864; --accent-soft: #E2EFEC; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="teal"], [data-theme="dark"] [data-accent="teal"] {
  --accent: #49C9B0; --accent-soft: #203B3C; --on-accent: #12161B;
}
:root[data-accent="mint"], [data-accent="mint"] {
  --accent: #347754; --accent-soft: #E7EFEA; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="mint"], [data-theme="dark"] [data-accent="mint"] {
  --accent: #6BBF9B; --accent-soft: #263939; --on-accent: #12161B;
}
:root[data-accent="green"], [data-accent="green"] {
  --accent: #46764B; --accent-soft: #E9EFE9; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="green"], [data-theme="dark"] [data-accent="green"] {
  --accent: #7AA47B; --accent-soft: #293433; --on-accent: #12161B;
}
:root[data-accent="sea"], [data-accent="sea"],
:root[data-accent="slate"], [data-accent="slate"] {
  --accent: #277192; --accent-soft: #E5EEF2; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="sea"], [data-theme="dark"] [data-accent="sea"],
:root[data-theme="dark"][data-accent="slate"], [data-theme="dark"] [data-accent="slate"] {
  --accent: #58A2C3; --accent-soft: #233440; --on-accent: #12161B;
}
:root[data-accent="violet"], [data-accent="violet"] {
  --accent: #8D44AD; --accent-soft: #F1E9F5; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="violet"], [data-theme="dark"] [data-accent="violet"] {
  --accent: #C29BD2; --accent-soft: #363343; --on-accent: #12161B;
}
/* Three the owner named, each adjusted only as far as reading needs: the
   gold is #F3C430 darkened for a light page and as it is in the dark. */
:root[data-accent="indigo"], [data-accent="indigo"] {
  --accent: #5C4EE5; --accent-soft: #EBEAFC; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="indigo"], [data-theme="dark"] [data-accent="indigo"] {
  --accent: #988FEF; --accent-soft: #2E3148; --on-accent: #12161B;
}
:root[data-accent="red"], [data-accent="red"] {
  --accent: #C33635; --accent-soft: #F8E7E7; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="red"], [data-theme="dark"] [data-accent="red"] {
  --accent: #DD7C7B; --accent-soft: #3B2D33; --on-accent: #12161B;
}
:root[data-accent="gold"], [data-accent="gold"] {
  --accent: #816819; --accent-soft: #F0EDE3; --on-accent: #FFFFFF;
}
:root[data-theme="dark"][data-accent="gold"], [data-theme="dark"] [data-accent="gold"] {
  --accent: #F3C430; --accent-soft: #3F3A25; --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; }