/* 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
       tokyo-night         Tokyo Night
       tokyo-night-day     Tokyo Night Day
       catppuccin-mocha    Catppuccin Mocha
       gruvbox-dark-hard   Gruvbox Dark Hard
       nord                Nord
       rose-pine           Rosé Pine

   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 themes keep to their published palettes; which palette colour
   plays which role is noted beside each. */


/* 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);
    }
}


/* Tokyo Night (night) ----------------------------------------------------- */

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

    --background: #1a1b26;          /* bg */
    --surface: #1f2335;             /* bg_float (storm) */
    --surface-hover: #292e42;       /* bg_highlight */
    --text: #c0caf5;                /* fg */
    --border: #292e42;              /* bg_highlight */
    --border-strong: #3b4261;       /* fg_gutter */
    --text-soft: #a9b1d6;           /* fg_dark */
    --accent: #7aa2f7;              /* blue */
    --danger: #f7768e;              /* red */
    --shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
}


/* Tokyo Night Day --------------------------------------------------------- */

[data-theme="tokyo-night-day"] {
    color-scheme: light;

    --background: #e1e2e7;          /* bg */
    --surface: #e9e9ed;             /* white */
    --surface-hover: #d0d5e3;       /* bg_dark */
    --text: #3760bf;                /* fg */
    --border: #c4c8da;              /* bg_highlight */
    --border-strong: #a8aecb;       /* fg_gutter */
    --text-soft: #6172b0;           /* fg_dark */
    --accent: #3760bf;              /* fg: blue (#2e7de9) is too light behind text */
    --danger: #c64343;              /* red1: red (#f52a65) is too faint as text here */
    --shadow: 0 12px 35px rgba(55, 96, 191, 0.08);
}


/* Catppuccin Mocha -------------------------------------------------------- */

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

    --background: #181825;          /* mantle */
    --surface: #1e1e2e;             /* base */
    --surface-hover: #313244;       /* surface0 */
    --text: #cdd6f4;                /* text */
    --border: #313244;              /* surface0 */
    --border-strong: #45475a;       /* surface1 */
    --text-soft: #a6adc8;           /* subtext0 */
    --accent: #cba6f7;              /* mauve */
    --danger: #f38ba8;              /* red */
    --shadow: 0 14px 38px rgba(17, 17, 27, 0.4);    /* crust */
}


/* Gruvbox Dark Hard ------------------------------------------------------- */

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

    --background: #1d2021;          /* bg0_h */
    --surface: #282828;             /* bg0 */
    --surface-hover: #3c3836;       /* bg1 */
    --text: #ebdbb2;                /* fg1 */
    --border: #3c3836;              /* bg1 */
    --border-strong: #504945;       /* bg2 */
    --text-soft: #a89984;           /* fg4 */
    --accent: #fabd2f;              /* yellow */
    --danger: #fb4934;              /* red */
    --shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
}


/* Nord -------------------------------------------------------------------- */

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

    --background: #2e3440;          /* nord0 */
    --surface: #3b4252;             /* nord1 */
    --surface-hover: #434c5e;       /* nord2 */
    --text: #eceff4;                /* nord6 */
    --border: #434c5e;              /* nord2 */
    --border-strong: #4c566a;       /* nord3 */
    --text-soft: #d8dee9;           /* nord4 */
    --accent: #88c0d0;              /* nord8 */
    --danger: #bf616a;              /* nord11 */
    --shadow: 0 14px 38px rgba(0, 0, 0, 0.25);
}


/* Rosé Pine (main) -------------------------------------------------------- */

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

    --background: #191724;          /* base */
    --surface: #1f1d2e;             /* surface */
    --surface-hover: #26233a;       /* overlay */
    --text: #e0def4;                /* text */
    --border: #403d52;              /* highlight med */
    --border-strong: #524f67;       /* highlight high */
    --text-soft: #908caa;           /* subtle */
    --accent: #ebbcba;              /* rose */
    --danger: #eb6f92;              /* love */
    --shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
}