/* The four colours: the same page in other colours.
   ------------------------------------------------------------------------

   A palette is five tokens and nothing else - the accent, the deeper one it is pressed
   in, the ink the accent is written in, the soft wash behind it, and the second light in
   the page's ground - so a palette can change how the site is coloured without changing
   what any part of it *is*. Nothing here measures anything: no palette may move a box,
   and none of them does. That is what lets one file colour two applications that share
   no layout at all.

   They are written once per theme, because the accent is a light ink on a dark page and
   a deep one on a light page, and a single value could not be both. Which theme a page
   is in is said differently on the two sides of the site:

   - the planner marks <html data-theme="dark|light" data-palette="...">;
   - the tracker has no theme attribute at all - light is a class on <body>, where its
     palette is declared - and marks <body class="light-mode" data-palette="...">.

   So each light rule is written as a pair: the planner's two attributes, and the
   tracker's class and attribute together. Both carry more weight than the plain
   `[data-palette]` rule above them, which is what makes a page that is light *and*
   violet violet rather than blue. Ocean, the first of the four, is the blue both
   stylesheets already declare for themselves, so there is nothing to write for it: a
   reader who never answers gets it, and the answer "ocean" and no answer at all are the
   same page.

   @see app/Support/Prefs.php, assets/css/app.css, bills/style.css,
        app/Views/partials/palette-rack.php
*/

/* The samples the rack offers the four by. They are tokens here rather than colours
   written into the rack's own rules, because a swatch drawn from `--accent` or `--violet`
   would be the colour the page is *already* in - the one thing a sample of another
   palette must not be. Declared beside the palettes they sample, they are still the
   single place a colour is named: the rack's own rule names none. */
:root {
    --swatch-ocean: linear-gradient(135deg, #3b82f6 0 50%, #8b5cf6 50% 100%);
    --swatch-violet: linear-gradient(135deg, #7c3aed 0 50%, #d946ef 50% 100%);
    --swatch-forest: linear-gradient(135deg, #059669 0 50%, #84cc16 50% 100%);
    --swatch-sunset: linear-gradient(135deg, #ea580c 0 50%, #e11d48 50% 100%);
}

[data-palette="violet"] {
    --accent: #7c3aed;
    --accent-strong: #6d28d9;
    --accent-ink: #c4b5fd;
    --accent-soft: rgb(124 58 237 / 20%);
    --violet: #d946ef;
}

[data-theme="light"][data-palette="violet"],
.light-mode[data-palette="violet"] {
    --accent: #6d28d9;
    --accent-strong: #5b21b6;
    --accent-ink: #5b21b6;
    --accent-soft: rgb(109 40 217 / 12%);
    --violet: #a21caf;
}

[data-palette="forest"] {
    --accent: #059669;
    --accent-strong: #047857;
    --accent-ink: #6ee7b7;
    --accent-soft: rgb(5 150 105 / 20%);
    --violet: #84cc16;
}

[data-theme="light"][data-palette="forest"],
.light-mode[data-palette="forest"] {
    --accent: #047857;
    --accent-strong: #065f46;
    --accent-ink: #065f46;
    --accent-soft: rgb(4 120 87 / 12%);
    --violet: #4d7c0f;
}

[data-palette="sunset"] {
    --accent: #ea580c;
    --accent-strong: #c2410c;
    --accent-ink: #fdba74;
    --accent-soft: rgb(234 88 12 / 20%);
    --violet: #e11d48;
}

[data-theme="light"][data-palette="sunset"],
.light-mode[data-palette="sunset"] {
    --accent: #c2410c;
    --accent-strong: #9a3412;
    --accent-ink: #9a3412;
    --accent-soft: rgb(194 65 12 / 12%);
    --violet: #be123c;
}