/* rhys.wtf palettes: one stylesheet, shared by every rhys.wtf app, that
   recolours a page without touching its own styles.

   THE CONTRACT

   Each app's main.css colours everything through semantic `--color-*`
   variables, which only reference these raw slots (Gruvbox's names, kept
   for every palette):

     light:  --gruvbox-bg0-hard  --gruvbox-bg0  --gruvbox-bg0-soft
             --gruvbox-bg1 … --gruvbox-bg4      --gruvbox-fg0 … --gruvbox-fg4
             --gruvbox-gray
             --gruvbox-{red,green,yellow,blue,purple,aqua,orange}
             --gruvbox-{red,…,orange}-faded
     dark:   --gruvbox-dark-bg0-hard  --gruvbox-dark-bg0  --gruvbox-dark-bg0-soft
             --gruvbox-dark-bg1 … --gruvbox-dark-bg4
             --gruvbox-dark-fg0 … --gruvbox-dark-fg4
             --gruvbox-dark-{red,…,orange}-bright

   plus one semantic token that doesn't flip with the scheme:

     --color-on-accent   glyphs drawn on an accent fill (app icons)

   main.css's `:root` holds Gruvbox's values; its dark-scheme blocks
   (`@media (prefers-color-scheme: dark) :root:not([data-theme="light"])`
   and `:root[data-theme="dark"]`) copy the `--gruvbox-dark-*` values over
   the light slots, the `-bright` accents over the `-faded` ones. So a
   palette only has to redefine the slots: light/dark keeps working, and
   every app that includes this file after its main.css and sets
   `data-palette` on <html> follows.

   What the slots mean, so a new palette maps onto them well:
     bg0       the light page; bg0-hard the surface (inputs, buttons,
               cards), a touch lighter; bg0-soft hover and prefixes;
               bg1/bg2 tracks and faint rules; bg3/bg4 non-text only.
     fg0       borders and the strongest ink; fg1 body text and links;
               fg3 headings and muted text (it must pass AA too); fg2 in
               between; fg4 non-text only.
     -faded    the accents as text on the light page (error, badges, link
               hover): at least 4.5:1 on bg0 and bg1.
     plain     the accents as fills, the same in both schemes.
     dark-bg1  the dark page; dark-bg0-hard the dark surface (darker);
               dark-bg0-soft hover; dark-bg2 tracks and faint rules.
     dark-fg0  ALL text, links and borders in dark (main.css uses only it).
     -bright   the accents as text on the dark page: 4.5:1 on dark-bg1.

   THE SELECTOR

   `:root:where([data-palette="…"])` has exactly `:root`'s specificity, so
   (loaded after main.css) it beats main.css's `:root` by source order but
   loses to the dark-scheme blocks, which must still copy the dark slots
   over the light ones. Don't write `:root[data-palette]`: that ties with
   the dark blocks and, coming later, would undo dark mode.

   THE COOKIE

   `rhys_palette` = gruvbox | solarized | boring, for `Domain=rhys.wtf`,
   `Path=/`, `SameSite=Lax`, `Secure` over https, a year; not HttpOnly, so
   a page can switch instantly. Chosen on profiles.rhys.wtf (Account
   settings) and set again at each sign-in there. Each app reads it on the
   server, checks it against the list and renders `data-palette` on
   <html> (an unknown value: no attribute). profiles' src/palette.rs is
   the reference: copy it.

   ADDING A PALETTE

   1. Add a block below defining every slot above (light and dark) and
      --color-on-accent. Check AA: fg1 and fg3 on bg0, bg0-hard and
      bg0-soft; -faded on bg0 and bg1; dark-fg0 and -bright on dark-bg1
      and dark-bg0-soft.
   2. Add it to `Palette` in palette.rs (value, label, preview colours),
      in each app that copies it, and bump each app's asset version.

   Gruvbox has no block: it's main.css's own values. */

/* Solarized, Ethan Schoonover's values (ethanschoonover.com/solarized).
   Light: base3 page, base01 text (base00, the canonical body colour, is
   only 4.1:1 on base3, so it's kept for non-text), base02 borders. Dark:
   base03 page, base1 text and borders. Magenta takes the purple slots
   (Gruvbox's purple is pinkish too) and cyan the aqua; violet has no slot.
   The plain accents are canonical; the -faded and -bright ones keep their
   hue, darkened or lightened just enough for AA. The hard, soft and
   bg2/bg3 steps between Solarized's four greys are derived. */
/* Solarized. Text in dark mode is a step brighter than canonical (base2 for
   body text, base1 for secondary, base0 for the faintest), because base1 on
   base03 read as dim. */
:root:where([data-palette="solarized"]) {
    --gruvbox-bg0-hard: #fffbf0;
    --gruvbox-bg0: #fdf6e3;
    --gruvbox-bg0-soft: #f5efdc;
    --gruvbox-bg1: #eee8d5;
    --gruvbox-bg2: #ddd6c1;
    --gruvbox-bg3: #c9c2ad;
    --gruvbox-bg4: #93a1a1;

    --gruvbox-fg0: #073642;
    --gruvbox-fg1: #586e75;
    --gruvbox-fg2: #586e75;
    --gruvbox-fg3: #586e75;
    --gruvbox-fg4: #657b83;

    --gruvbox-gray: #93a1a1;

    --gruvbox-red: #dc322f;
    --gruvbox-green: #859900;
    --gruvbox-yellow: #b58900;
    --gruvbox-blue: #268bd2;
    --gruvbox-purple: #d33682;
    --gruvbox-aqua: #2aa198;
    --gruvbox-orange: #cb4b16;

    --gruvbox-red-faded: #b02a27;
    --gruvbox-green-faded: #5f6e00;
    --gruvbox-yellow-faded: #7a5c00;
    --gruvbox-blue-faded: #1c69a0;
    --gruvbox-purple-faded: #a32b6e;
    --gruvbox-aqua-faded: #146f69;
    --gruvbox-orange-faded: #a33c12;

    --gruvbox-dark-bg0-hard: #00212b;
    --gruvbox-dark-bg0: #002731;
    --gruvbox-dark-bg0-soft: #04303c;
    --gruvbox-dark-bg1: #002b36;
    --gruvbox-dark-bg2: #073642;
    --gruvbox-dark-bg3: #284b54;
    --gruvbox-dark-bg4: #586e75;
    --gruvbox-dark-fg0: #eee8d5;
    --gruvbox-dark-fg1: #eee8d5;
    --gruvbox-dark-fg2: #93a1a1;
    --gruvbox-dark-fg3: #93a1a1;
    --gruvbox-dark-fg4: #839496;
    --gruvbox-dark-red-bright: #f0605d;
    --gruvbox-dark-green-bright: #a5bb1d;
    --gruvbox-dark-yellow-bright: #d3a21a;
    --gruvbox-dark-blue-bright: #4ba6e8;
    --gruvbox-dark-purple-bright: #e86ba9;
    --gruvbox-dark-aqua-bright: #35bdb2;
    --gruvbox-dark-orange-bright: #ec7a48;

    --color-on-accent: #fdf6e3;
}

/* Boring, after Diagrams' boring-light and boring-dark canvases: a white
   page with #1e1e1e ink, a black-ish one with #f8f9fa, neutral greys with
   no tint, and plain saturated accents (Diagrams' red #e03131, orange
   #f08c00, green #2f9e44, blue #1971c2 and purple #9c36b5, which are Open
   Color's shade 8; yellow and aqua are Open Color's yellow 6 and cyan 8).
   The -faded accents are the next shade darker (green, yellow and orange
   darker still, for AA on white and bg1); the -bright ones Open Color's
   shades 3–4. */
:root:where([data-palette="boring"]) {
    --gruvbox-bg0-hard: #ffffff;
    --gruvbox-bg0: #ffffff;
    --gruvbox-bg0-soft: #f5f5f5;
    --gruvbox-bg1: #ebebeb;
    --gruvbox-bg2: #dedede;
    --gruvbox-bg3: #c8c8c8;
    --gruvbox-bg4: #a8a8a8;

    --gruvbox-fg0: #1e1e1e;
    --gruvbox-fg1: #1e1e1e;
    --gruvbox-fg2: #333333;
    --gruvbox-fg3: #4d4d4d;
    --gruvbox-fg4: #6b6b6b;

    --gruvbox-gray: #8a8a8a;

    --gruvbox-red: #e03131;
    --gruvbox-green: #2f9e44;
    --gruvbox-yellow: #fab005;
    --gruvbox-blue: #1971c2;
    --gruvbox-purple: #9c36b5;
    --gruvbox-aqua: #0c8599;
    --gruvbox-orange: #f08c00;

    --gruvbox-red-faded: #c92a2a;
    --gruvbox-green-faded: #237a37;
    --gruvbox-yellow-faded: #9a5b00;
    --gruvbox-blue-faded: #1864ab;
    --gruvbox-purple-faded: #862e9c;
    --gruvbox-aqua-faded: #0b7285;
    --gruvbox-orange-faded: #b33c0b;

    --gruvbox-dark-bg0-hard: #000000;
    --gruvbox-dark-bg0: #0a0a0a;
    --gruvbox-dark-bg0-soft: #1c1c1c;
    --gruvbox-dark-bg1: #121212;
    --gruvbox-dark-bg2: #2a2a2a;
    --gruvbox-dark-bg3: #3d3d3d;
    --gruvbox-dark-bg4: #5c5c5c;
    --gruvbox-dark-fg0: #f8f9fa;
    --gruvbox-dark-fg1: #e0e0e0;
    --gruvbox-dark-fg2: #cccccc;
    --gruvbox-dark-fg3: #b3b3b3;
    --gruvbox-dark-fg4: #999999;
    --gruvbox-dark-red-bright: #ff8787;
    --gruvbox-dark-green-bright: #69db7c;
    --gruvbox-dark-yellow-bright: #ffd43b;
    --gruvbox-dark-blue-bright: #74c0fc;
    --gruvbox-dark-purple-bright: #e599f7;
    --gruvbox-dark-aqua-bright: #3bc9db;
    --gruvbox-dark-orange-bright: #ffa94d;

    --color-on-accent: #ffffff;
}