/* The site's colours. Like a terminal theme: a background and foreground, the 16 ANSI
   colours (which the printcodes use too), darker versions for backgrounds, and then
   names for what each colour means here. Everything else should use these.

   :root is the default theme, midnight; the others (see the Theme model) override its
   colours under :root[data-theme="<name>"]. The names for what colours mean are only
   set here, from the colours, so the themes don't need to repeat them. */
@layer theme {
  :root {
    color-scheme: dark;

    --bg: #0d0f17;
    --fg: #d5d9e6;
    --fg-muted: #8189a3;
    --fg-faint: #4d546d;
    --fg-strong: #ffffff;
    --selection: #2a3152;

    --black: #1c1f2b;
    --red: #e5677a;
    --green: #8fc56a;
    --yellow: #e0b45e;
    --blue: #6f9cf2;
    --magenta: #b48cf2;
    --cyan: #5fc4d9;
    --white: #c7ccda;

    --bright-black: #6c7391;
    --bright-red: #ff8597;
    --bright-green: #b4e88f;
    --bright-yellow: #ffd785;
    --bright-blue: #9dbcff;
    --bright-magenta: #d1b3ff;
    --bright-cyan: #8ae4f5;
    --bright-white: #ffffff;

    --orange: #f29a5e;
    --pink: #f78fc4;

    --bg-black: #000000;
    --bg-red: #5c1f2a;
    --bg-green: #24432a;
    --bg-yellow: #4d3b17;
    --bg-blue: #1f2e57;
    --bg-magenta: #3d2a5c;
    --bg-cyan: #17414a;
    --bg-white: #c7ccda;

    /* What things are. */
    --command: var(--cyan);
    --highlight: var(--yellow);
    --error: var(--red);
    --caret: var(--bright-cyan);
    --whisper: var(--bright-magenta);

    --prompt-user: var(--green);
    --prompt-host: var(--blue);
    --prompt-path: var(--magenta);
    --prompt-talker: var(--orange);

    /* Usernames each get one of these, picked from the name (see TalkerHelper). */
    --username-0: var(--bright-red);
    --username-1: var(--bright-green);
    --username-2: var(--bright-yellow);
    --username-3: var(--bright-blue);
    --username-4: var(--bright-magenta);
    --username-5: var(--bright-cyan);
    --username-6: var(--orange);
    --username-7: var(--pink);

    /* `ls` colours files by what they are, like dircolors (see HomeDirectoryHelper). */
    --file-document: var(--yellow);
    --file-code: var(--green);
    --file-image: var(--magenta);
    --file-archive: var(--red);
    --file-media: var(--cyan);

    --gutter: clamp(1rem, 3vw, 2.5rem);
    /* How wide the text gets on a wide screen. */
    --measure: 100ch;
  }

  /* Amber and green phosphor: one colour, in shades. Their CRT effect is in
     application.css. */
  :root[data-theme="amber"] {
    --bg: #120b03;
    --fg: #ffb43d;
    --fg-muted: #b37a1f;
    --fg-faint: #5c3f0f;
    --fg-strong: #ffd27a;
    --selection: #4d330b;

    --black: #2b1c06;
    --red: #e8892b;
    --green: #ffb43d;
    --yellow: #ffc561;
    --blue: #d99a2e;
    --magenta: #f2a541;
    --cyan: #ffcf73;
    --white: #f0b050;

    --bright-black: #8a6220;
    --bright-red: #ffa04d;
    --bright-green: #ffd27a;
    --bright-yellow: #ffe0a0;
    --bright-blue: #f5b85c;
    --bright-magenta: #ffc070;
    --bright-cyan: #ffe2a8;
    --bright-white: #fff0d0;

    --orange: #ff9a2e;
    --pink: #ffbf80;

    --bg-black: #000000;
    --bg-red: #4a2808;
    --bg-green: #3d2a08;
    --bg-yellow: #4d3510;
    --bg-blue: #33220a;
    --bg-magenta: #422b0c;
    --bg-cyan: #4d3a14;
    --bg-white: #ffb43d;
  }

  :root[data-theme="green"] {
    --bg: #04110a;
    --fg: #4dff88;
    --fg-muted: #2a9e55;
    --fg-faint: #145c30;
    --fg-strong: #b8ffd0;
    --selection: #0f4024;

    --black: #0a2414;
    --red: #2ee66a;
    --green: #4dff88;
    --yellow: #8cffb0;
    --blue: #33cc70;
    --magenta: #5cf095;
    --cyan: #a0ffc4;
    --white: #6dffa0;

    --bright-black: #237a45;
    --bright-red: #66ff99;
    --bright-green: #a6ffc6;
    --bright-yellow: #c8ffdb;
    --bright-blue: #5ce68f;
    --bright-magenta: #80ffaa;
    --bright-cyan: #d0ffe2;
    --bright-white: #eafff2;

    --orange: #70ffa0;
    --pink: #9affbf;

    --bg-black: #000000;
    --bg-red: #0b3a1d;
    --bg-green: #0f4a25;
    --bg-yellow: #155c2e;
    --bg-blue: #0b331a;
    --bg-magenta: #0f4022;
    --bg-cyan: #135230;
    --bg-white: #4dff88;
  }

  /* Dracula (https://draculatheme.com), with its comment colour lightened for muted
     text, which it's too dim for. */
  :root[data-theme="dracula"] {
    --bg: #282a36;
    --fg: #f8f8f2;
    --fg-muted: #9aa5ce;
    --fg-faint: #6272a4;
    --fg-strong: #ffffff;
    --selection: #44475a;

    --black: #21222c;
    --red: #ff5555;
    --green: #50fa7b;
    --yellow: #f1fa8c;
    --blue: #bd93f9;
    --magenta: #ff79c6;
    --cyan: #8be9fd;
    --white: #f8f8f2;

    --bright-black: #6272a4;
    --bright-red: #ff6e6e;
    --bright-green: #69ff94;
    --bright-yellow: #ffffa5;
    --bright-blue: #d6acff;
    --bright-magenta: #ff92df;
    --bright-cyan: #a4ffff;
    --bright-white: #ffffff;

    --orange: #ffb86c;
    --pink: #ffa3d7;

    --bg-black: #191a21;
    --bg-red: #5c2530;
    --bg-green: #24503a;
    --bg-yellow: #555a32;
    --bg-blue: #44386a;
    --bg-magenta: #5c2d50;
    --bg-cyan: #2d5560;
    --bg-white: #f8f8f2;
  }

  /* Light. Its "bright" colours are deeper rather than lighter, so they still read on
     the paper, and bright white is black. */
  :root[data-theme="paper"] {
    color-scheme: light;

    --bg: #f6f1e4;
    --fg: #2a2620;
    --fg-muted: #6b6252;
    --fg-faint: #b8ad96;
    --fg-strong: #000000;
    --selection: #e2d4b0;

    --black: #2a2620;
    --red: #b4232f;
    --green: #3a7419;
    --yellow: #8a5d00;
    --blue: #24569e;
    --magenta: #7b3aa8;
    --cyan: #136f80;
    --white: #6b6252;

    --bright-black: #8c836f;
    --bright-red: #9e1c28;
    --bright-green: #2d5e12;
    --bright-yellow: #7a5200;
    --bright-blue: #1c4585;
    --bright-magenta: #6a2c95;
    --bright-cyan: #0f5c6b;
    --bright-white: #000000;

    --orange: #a84d00;
    --pink: #a8326e;

    --bg-black: #2a2620;
    --bg-red: #f2c9c9;
    --bg-green: #cfe6bf;
    --bg-yellow: #f0dda8;
    --bg-blue: #c9d8f0;
    --bg-magenta: #e3d0f0;
    --bg-cyan: #c4e6ea;
    --bg-white: #ffffff;
  }
}