/* The colour themes shared by every app on the site: one block per theme,
   each setting the same eleven properties, so an app's CSS only ever uses
   var(--background), var(--text) and the rest.

   A theme applies when <html data-theme="…"> names it (or any other element,
   for what is inside it: the home page's theme menu shows each one so):

       m-info-light        M&Info Light
       m-info-dark         M&Info Dark
       soft-paper          Soft Paper
       cold-stone          Cold Stone
       midnight            Midnight
       blue-skies          Blue Skies
       dark-forest         Dark Forest

   Without one, the page follows the system: M&Info Light, or M&Info Dark when
   the system is dark. data-theme="light" and "dark", which the light/dark
   button sets, mean the two M&Info themes.

   A new theme is also listed in theme.js, with whether it is dark.

   What each property is for:

       --background      the page
       --surface         cards, panels, inputs, buttons
       --surface-hover   a hovered surface
       --text            body text
       --text-soft       secondary text, placeholders, icons
       --border          dividers, card edges
       --border-strong   control edges
       --accent          focus rings, links, the primary button (its text is
                         var(--background), so the two must contrast)
       --danger          errors, destructive actions
       --shadow          raised cards
       color-scheme      form controls and scrollbars

   The other five are the laptop's own themes (~/dotfiles/themes/palettes.json);
   the note beside each colour names the "ui" key it comes from. A theme
   taken out is also added to RETIRED in theme.js, so a browser still set to
   it moves to the nearest one left. */


/* M&Info Light ------------------------------------------------------------ */

:root,
[data-theme="light"],
[data-theme="m-info-light"] {
    color-scheme: light;

    --background: #f6f1e4;
    --surface: #fffdf7;
    --surface-hover: #faf5e9;
    --text: #12233f;
    --border: #e6dcc2;
    --border-strong: #d4c6a4;
    --text-soft: #667085;
    --accent: #12233f;
    --danger: #b33a3a;
    --shadow: 0 12px 35px rgba(18, 35, 63, 0.07);
}


/* M&Info Dark ------------------------------------------------------------- */

[data-theme="dark"],
[data-theme="m-info-dark"] {
    color-scheme: dark;

    --background: #0f1e36;
    --surface: #16294a;
    --surface-hover: #1b3157;
    --text: #f2ecdd;
    --border: #294063;
    --border-strong: #39547c;
    --text-soft: #b8c2d4;
    --accent: #f2ecdd;
    --danger: #ff8b8b;
    --shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

/* The same, for a dark system when no theme is chosen. A selector can't be
   both inside and outside a media query, so the values are repeated: change
   them together. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --background: #0f1e36;
        --surface: #16294a;
        --surface-hover: #1b3157;
        --text: #f2ecdd;
        --border: #294063;
        --border-strong: #39547c;
        --text-soft: #b8c2d4;
        --accent: #f2ecdd;
        --danger: #ff8b8b;
        --shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
    }
}


/* Soft Paper (Flexoki Light, from the dotfiles) --------------------------- */

[data-theme="soft-paper"] {
    color-scheme: light;

    --background: #f2f0e5;          /* bgDim */
    --surface: #fffcf0;             /* bg */
    --surface-hover: #e6e4d9;       /* bgAlt */
    --text: #100f0f;                /* fg */
    --border: #e6e4d9;              /* border */
    --border-strong: #cecdc3;       /* base-200 */
    --text-soft: #6f6e69;           /* fgDim */
    --accent: #205ea6;              /* accent */
    --danger: #af3029;              /* diag error */
    --shadow: 0 12px 35px rgba(16, 15, 15, 0.07);
}


/* Cold Stone (Nord, from the dotfiles) ------------------------------------ */

[data-theme="cold-stone"] {
    color-scheme: dark;

    --background: #2e3440;          /* bg */
    --surface: #3b4252;             /* bgAlt */
    --surface-hover: #434c5e;       /* sel */
    --text: #d8dee9;                /* fg */
    --border: #434c5e;              /* sel */
    --border-strong: #4c566a;       /* nord3 */
    --text-soft: #a5adbb;           /* fgDim */
    --accent: #88c0d0;              /* accent */
    --danger: #bf616a;              /* diag error */
    --shadow: 0 14px 38px rgba(0, 0, 0, 0.25);
}


/* Midnight (Kanagawa Dragon, from the dotfiles) --------------------------- */

[data-theme="midnight"] {
    color-scheme: dark;

    --background: #181616;          /* bg */
    --surface: #1d1c19;             /* dragonBlack4 */
    --surface-hover: #282727;       /* bgAlt */
    --text: #c5c9c5;                /* fg */
    --border: #282727;              /* border */
    --border-strong: #393836;       /* dragonBlack6 */
    --text-soft: #a6a69c;           /* fgDim */
    --accent: #8ba4b0;              /* accent */
    --danger: #e46876;              /* invalid: diag error (#e82424) is too dark here */
    --shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
}


/* Blue Skies (Tokyo Night Day, from the dotfiles) ------------------------- */

[data-theme="blue-skies"] {
    color-scheme: light;

    --background: #e1e2e7;          /* bg */
    --surface: #eef0f6;             /* the wallpaper's palest stop */
    --surface-hover: #d0d5e3;       /* bgDim */
    --text: #3760bf;                /* fg */
    --border: #c4c8da;              /* border */
    --border-strong: #a8aecb;       /* faint */
    --text-soft: #6172b0;           /* fgDim */
    --accent: #3760bf;              /* fg: accent (#2e7de9) is too light behind text */
    --danger: #c64343;              /* diag error */
    --shadow: 0 12px 35px rgba(55, 96, 191, 0.08);
}


/* Dark Forest (Everforest Dark, from the dotfiles) ------------------------ */

[data-theme="dark-forest"] {
    color-scheme: dark;

    --background: #2d353b;          /* bg */
    --surface: #343f44;             /* bgAlt */
    --surface-hover: #3d484d;       /* border */
    --text: #d3c6aa;                /* fg */
    --border: #3d484d;              /* border */
    --border-strong: #475258;       /* sel */
    --text-soft: #9da9a0;           /* fgDim */
    --accent: #a7c080;              /* accent */
    --danger: #e67e80;              /* diag error */
    --shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
}