/* Colours and themes. lierc.css only refers to the variables defined here.

   A theme is one block that sets every theme variable below; app.js puts
   the theme's name on <body> (no class means the default theme). */

/* Solarized palette (https://ethanschoonover.com/solarized/) */
:root {
  --base03:    #002b36;
  --base02:    #073642;
  --base01:    #586e75;
  --base00:    #657b83;
  --base0:     #839496;
  --base1:     #93a1a1;
  --base2:     #eee8d5;
  --base3:     #fdf6e3;
  --yellow:    #b58900;
  --orange:    #cb4b16;
  --red:       #dc322f;
  --magenta:   #d33682;
  --violet:    #6c71c4;
  --blue:      #268bd2;
  --cyan:      #2aa198;
  --green:     #859900;
}

/* Catppuccin palettes (https://github.com/catppuccin/catppuccin), one per
   flavour. Each body.catppuccin-* theme picks its flavour's colours; the
   shared Catppuccin theme block below decides where they go. */

/* Latte (light) */
body.catppuccin-latte {
  --ctp-scheme: light;
  --ctp-rosewater: #dc8a78;
  --ctp-flamingo:  #dd7878;
  --ctp-pink:      #ea76cb;
  --ctp-mauve:     #8839ef;
  --ctp-red:       #d20f39;
  --ctp-maroon:    #e64553;
  --ctp-peach:     #fe640b;
  --ctp-yellow:    #df8e1d;
  --ctp-green:     #40a02b;
  --ctp-teal:      #179299;
  --ctp-sky:       #04a5e5;
  --ctp-sapphire:  #209fb5;
  --ctp-blue:      #1e66f5;
  --ctp-lavender:  #7287fd;
  --ctp-text:      #4c4f69;
  --ctp-subtext1:  #5c5f77;
  --ctp-subtext0:  #6c6f85;
  --ctp-overlay2:  #7c7f93;
  --ctp-overlay1:  #8c8fa1;
  --ctp-overlay0:  #9ca0b0;
  --ctp-surface2:  #acb0be;
  --ctp-surface1:  #bcc0cc;
  --ctp-surface0:  #ccd0da;
  --ctp-base:      #eff1f5;
  --ctp-mantle:    #e6e9ef;
  --ctp-crust:     #dce0e8;
}

/* Frappé (dark) */
body.catppuccin-frappe {
  --ctp-scheme: dark;
  --ctp-rosewater: #f2d5cf;
  --ctp-flamingo:  #eebebe;
  --ctp-pink:      #f4b8e4;
  --ctp-mauve:     #ca9ee6;
  --ctp-red:       #e78284;
  --ctp-maroon:    #ea999c;
  --ctp-peach:     #ef9f76;
  --ctp-yellow:    #e5c890;
  --ctp-green:     #a6d189;
  --ctp-teal:      #81c8be;
  --ctp-sky:       #99d1db;
  --ctp-sapphire:  #85c1dc;
  --ctp-blue:      #8caaee;
  --ctp-lavender:  #babbf1;
  --ctp-text:      #c6d0f5;
  --ctp-subtext1:  #b5bfe2;
  --ctp-subtext0:  #a5adce;
  --ctp-overlay2:  #949cbb;
  --ctp-overlay1:  #838ba7;
  --ctp-overlay0:  #737994;
  --ctp-surface2:  #626880;
  --ctp-surface1:  #51576d;
  --ctp-surface0:  #414559;
  --ctp-base:      #303446;
  --ctp-mantle:    #292c3c;
  --ctp-crust:     #232634;
}

/* Macchiato (dark) */
body.catppuccin-macchiato {
  --ctp-scheme: dark;
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo:  #f0c6c6;
  --ctp-pink:      #f5bde6;
  --ctp-mauve:     #c6a0f6;
  --ctp-red:       #ed8796;
  --ctp-maroon:    #ee99a0;
  --ctp-peach:     #f5a97f;
  --ctp-yellow:    #eed49f;
  --ctp-green:     #a6da95;
  --ctp-teal:      #8bd5ca;
  --ctp-sky:       #91d7e3;
  --ctp-sapphire:  #7dc4e4;
  --ctp-blue:      #8aadf4;
  --ctp-lavender:  #b7bdf8;
  --ctp-text:      #cad3f5;
  --ctp-subtext1:  #b8c0e0;
  --ctp-subtext0:  #a5adcb;
  --ctp-overlay2:  #939ab7;
  --ctp-overlay1:  #8087a2;
  --ctp-overlay0:  #6e738d;
  --ctp-surface2:  #5b6078;
  --ctp-surface1:  #494d64;
  --ctp-surface0:  #363a4f;
  --ctp-base:      #24273a;
  --ctp-mantle:    #1e2030;
  --ctp-crust:     #181926;
}

/* Mocha (dark) */
body.catppuccin-mocha {
  --ctp-scheme: dark;
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo:  #f2cdcd;
  --ctp-pink:      #f5c2e7;
  --ctp-mauve:     #cba6f7;
  --ctp-red:       #f38ba8;
  --ctp-maroon:    #eba0ac;
  --ctp-peach:     #fab387;
  --ctp-yellow:    #f9e2af;
  --ctp-green:     #a6e3a1;
  --ctp-teal:      #94e2d5;
  --ctp-sky:       #89dceb;
  --ctp-sapphire:  #74c7ec;
  --ctp-blue:      #89b4fa;
  --ctp-lavender:  #b4befe;
  --ctp-text:      #cdd6f4;
  --ctp-subtext1:  #bac2de;
  --ctp-subtext0:  #a6adc8;
  --ctp-overlay2:  #9399b2;
  --ctp-overlay1:  #7f849c;
  --ctp-overlay0:  #6c7086;
  --ctp-surface2:  #585b70;
  --ctp-surface1:  #45475a;
  --ctp-surface0:  #313244;
  --ctp-base:      #1e1e2e;
  --ctp-mantle:    #181825;
  --ctp-crust:     #11111b;
}

/* Colours and fonts that are the same in every theme. To make one follow
   the theme, move it into the theme blocks below. */
:root {
  --white: #fff;
  --black: #000;
  --grey-333: #333;
  --grey-555: #555;
  --grey-666: #666;
  --grey-777: #777;
  --grey-999: #999;
  --grey-ddd: #ddd;
  --grey-eee: #eee;
  --grey-efefef: #efefef;
  --border: #ccc;

  --warning: #ffa130;                /* the default theme's disconnected bar and markers */
  --required: red;
  --notice-channel: #02c702;
  --focus-border: #7a9cd3;
  --focus-ring: #9ec0f7;

  --tint-hover: rgba(0, 0, 0, 0.02);           /* message row tints */
  --tint-self: rgba(49, 168, 255, 0.10);
  --tint-highlight: rgba(118, 49, 255, 0.15);
  --tint-focused: rgba(255, 239, 49, 0.2);
  --tint-controls: rgba(0, 0, 0, 0.03);
  --media-outline: rgba(0, 0, 0, 0.025);
  --overlay-bg: rgba(0, 0, 0, 0.5);

  --font-ui: BlinkMacSystemFont, "San Francisco",
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  --font-mono: "Menlo", "Inconsolata", "Consolas",
    "Droid Sans Mono", "Monaco", monospace;
}

/* Nick colours. render.js hashes each user to one of these 40 slots, so a
   theme can recolour them (overriding any or all) without moving anyone
   to a different slot. */
:root {
  --nick-0: MediumVioletRed;
  --nick-1: PaleVioletRed;
  --nick-2: DeepPink;
  --nick-3: HotPink;
  --nick-4: Red;
  --nick-5: #da1717;
  --nick-6: FireBrick;
  --nick-7: Crimson;
  --nick-8: IndianRed;
  --nick-9: Orange;
  --nick-10: DarkOrange;
  --nick-11: Coral;
  --nick-12: Tomato;
  --nick-13: OrangeRed;
  --nick-14: Maroon;
  --nick-15: #bb4545;
  --nick-16: #c56232;
  --nick-17: SaddleBrown;
  --nick-18: Chocolate;
  --nick-19: Peru;
  --nick-20: DarkGoldenrod;
  --nick-21: Goldenrod;
  --nick-22: #6363b3;
  --nick-23: MediumBlue;
  --nick-24: #4040ff;
  --nick-25: RoyalBlue;
  --nick-26: SteelBlue;
  --nick-27: CornflowerBlue;
  --nick-28: DodgerBlue;
  --nick-29: DeepSkyBlue;
  --nick-30: LightSkyBlue;
  --nick-31: SkyBlue;
  --nick-32: MediumSlateBlue;
  --nick-33: SlateBlue;
  --nick-34: DarkSlateBlue;
  --nick-35: Indigo;
  --nick-36: #bd0bbd;
  --nick-37: DarkMagenta;
  --nick-38: DarkOrchid;
  --nick-39: DarkViolet;
}

/* Default theme */
:root {
  --panel-bg: var(--white);                  /* message area, date separator, last-read marker */
  --panel-text: var(--base03);
  --topic-bg: transparent;
  --nicks-toggle-bg: var(--white);
  --nicks-toggle-icon: var(--magenta);   /* the ⋮ that shows the nick list */
  --foot-bg: transparent;
  --link: var(--blue);
  --link-visited: var(--violet);
  --info-bg: var(--grey-eee);                 /* /info and server lines */
  --info-text: var(--grey-333);

  --input-bg: transparent;
  --input-border: var(--border);
  --input-focus-border: var(--focus-border);
  --input-focus-ring: var(--focus-ring);
  --input-disabled-bg: var(--grey-eee);

  --sidebar-bg: var(--base03);       /* sidebar and header bar */
  --sidebar-hover: var(--base02);
  --sidebar-text: var(--base01);
  --sidebar-text-strong: var(--white); /* title, unread and active items */
  --sidebar-link: var(--base1);
  --sidebar-link-disconnected: var(--base0);
  --sidebar-muted: var(--base00);
  --sidebar-highlight: var(--orange);
  --sidebar-alert: var(--red);
  --sidebar-active: var(--cyan);
  --sidebar-selected: var(--blue);
  --sidebar-menu-bg: var(--base3);   /* the menu under the header's chevron */
  --sidebar-menu-hover: var(--base2);
  --sidebar-menu-link: var(--grey-777);
  --sidebar-menu-link-hover: var(--grey-555);

  --spinner: var(--warning);           /* loading older messages */
  --highlight-bg: var(--tint-highlight);   /* rows that mention you */
  --typing-text: var(--grey-666);
  --last-read: var(--warning);          /* the new-messages line */
  --lastlog: var(--warning);            /* where /last's results start */
  --reconnect-bg: var(--warning);       /* the disconnected bar */
  --reconnect-text: var(--white);
  --media-toggle: #7600bd;         /* image and embed show/hide arrows */
  --button-icon: var(--grey-666);          /* react, emoji and upload buttons */
  --button-icon-hover: var(--black);
  --button-outline: var(--border);       /* the react button's box */

  --date-text: var(--base01);
  --date-line: var(--base1);
  --meta-text: var(--grey-555);                 /* channel controls and nick list */
  --meta-text-hover: var(--black);
  --meta-border: var(--grey-eee);           /* nick list edges */
  --meta-controls-bg: var(--tint-controls);
  --meta-controls-hover: var(--grey-efefef);

  /* dialogs, the emoji picker and the image uploader */
  --popup-bg: var(--grey-eee);
  --popup-text: var(--base03);
  --popup-text-strong: var(--black);
  --popup-surface: var(--white);
  --popup-hover: var(--grey-eee);
  --popup-muted: var(--grey-666);
  --popup-label: var(--grey-555);
  --popup-border: var(--border);
  --popup-bevel: var(--white);
  --color-scheme: normal;          /* form controls inside them */

  --image-border: var(--grey-eee);
  --image-border-hover: var(--border);
  --embed-border: var(--grey-ddd);
  --embed-border-hover: var(--border);
  --embed-open-border: none;
  --embed-open-border-hover: none;

  --reaction-bg: rgba(0, 0, 0, 0.05);
  --reaction-bg-hover: rgba(0, 0, 0, 0.09);
  --reaction-border: var(--border);
  --reaction-border-hover: var(--grey-999);
  --reaction-count: var(--grey-666);
  --reaction-self-bg: rgba(38, 139, 210, 0.15);
  --reaction-self-bg-hover: rgba(38, 139, 210, 0.25);
  --reaction-self-count: var(--blue);
}

body.solarized {
  --panel-bg: var(--base3);
  --panel-text: var(--base03);
  --topic-bg: var(--base2);
  --nicks-toggle-bg: var(--base2);
  --nicks-toggle-icon: var(--magenta);   /* the ⋮ that shows the nick list */
  --foot-bg: var(--base2);
  --link: var(--blue);
  --link-visited: var(--violet);
  --info-bg: var(--grey-eee);                 /* /info and server lines */
  --info-text: var(--grey-333);

  --input-bg: var(--base3);
  --input-border: var(--border);
  --input-focus-border: var(--focus-border);
  --input-focus-ring: var(--focus-ring);
  --input-disabled-bg: var(--base3);

  --sidebar-bg: var(--base03);       /* sidebar and header bar */
  --sidebar-hover: var(--base02);
  --sidebar-text: var(--base01);
  --sidebar-text-strong: var(--white); /* title, unread and active items */
  --sidebar-link: var(--base1);
  --sidebar-link-disconnected: var(--base0);
  --sidebar-muted: var(--base00);
  --sidebar-highlight: var(--orange);
  --sidebar-alert: var(--red);
  --sidebar-active: var(--cyan);
  --sidebar-selected: var(--blue);
  --sidebar-menu-bg: var(--base3);   /* the menu under the header's chevron */
  --sidebar-menu-hover: var(--base2);
  --sidebar-menu-link: var(--grey-777);
  --sidebar-menu-link-hover: var(--grey-555);

  --spinner: var(--orange);           /* loading older messages */
  --highlight-bg: var(--tint-highlight);   /* rows that mention you */
  --typing-text: var(--grey-666);
  --last-read: var(--orange);          /* the new-messages line */
  --lastlog: var(--orange);            /* where /last's results start */
  --reconnect-bg: var(--orange);       /* the disconnected bar */
  --reconnect-text: var(--base3);
  --media-toggle: #7600bd;         /* image and embed show/hide arrows */
  --button-icon: var(--grey-666);          /* react, emoji and upload buttons */
  --button-icon-hover: var(--black);
  --button-outline: var(--border);       /* the react button's box */

  --date-text: var(--base01);
  --date-line: var(--base1);
  --meta-text: var(--grey-555);
  --meta-text-hover: var(--black);
  --meta-border: var(--grey-eee);           /* nick list edges */
  --meta-controls-bg: var(--tint-controls);
  --meta-controls-hover: var(--grey-efefef);

  /* dialogs, the emoji picker and the image uploader */
  --popup-bg: var(--grey-eee);
  --popup-text: var(--base03);
  --popup-text-strong: var(--black);
  --popup-surface: var(--white);
  --popup-hover: var(--grey-eee);
  --popup-muted: var(--grey-666);
  --popup-label: var(--grey-555);
  --popup-border: var(--border);
  --popup-bevel: var(--white);
  --color-scheme: normal;          /* form controls inside them */

  --image-border: var(--grey-eee);
  --image-border-hover: var(--border);
  --embed-border: var(--grey-ddd);
  --embed-border-hover: var(--border);
  --embed-open-border: none;
  --embed-open-border-hover: none;

  --reaction-bg: rgba(0, 0, 0, 0.05);
  --reaction-bg-hover: rgba(0, 0, 0, 0.09);
  --reaction-border: var(--border);
  --reaction-border-hover: var(--grey-999);
  --reaction-count: var(--grey-666);
  --reaction-self-bg: rgba(38, 139, 210, 0.15);
  --reaction-self-bg-hover: rgba(38, 139, 210, 0.25);
  --reaction-self-count: var(--blue);
}

body.solarized-dark {
  --panel-bg: var(--base02);
  --panel-text: var(--white);
  --topic-bg: var(--base03);
  --nicks-toggle-bg: var(--base03);
  --nicks-toggle-icon: var(--magenta);   /* the ⋮ that shows the nick list */
  --foot-bg: transparent;
  --link: var(--blue);
  --link-visited: var(--violet);
  --info-bg: var(--grey-eee);                 /* /info and server lines */
  --info-text: var(--grey-333);

  --input-bg: transparent;
  --input-border: var(--base01);
  --input-focus-border: var(--base0);
  --input-focus-ring: var(--base0);
  --input-disabled-bg: var(--grey-eee);

  --sidebar-bg: var(--base03);       /* sidebar and header bar */
  --sidebar-hover: var(--base02);
  --sidebar-text: var(--base01);
  --sidebar-text-strong: var(--white); /* title, unread and active items */
  --sidebar-link: var(--base1);
  --sidebar-link-disconnected: var(--base0);
  --sidebar-muted: var(--base00);
  --sidebar-highlight: var(--orange);
  --sidebar-alert: var(--red);
  --sidebar-active: var(--cyan);
  --sidebar-selected: var(--blue);
  --sidebar-menu-bg: var(--base3);   /* the menu under the header's chevron */
  --sidebar-menu-hover: var(--base2);
  --sidebar-menu-link: var(--grey-777);
  --sidebar-menu-link-hover: var(--grey-555);

  --spinner: var(--orange);           /* loading older messages */
  --highlight-bg: var(--tint-highlight);   /* rows that mention you */
  --typing-text: var(--grey-666);
  --last-read: var(--orange);          /* the new-messages line */
  --lastlog: var(--orange);            /* where /last's results start */
  --reconnect-bg: var(--orange);       /* the disconnected bar */
  --reconnect-text: var(--base3);
  --media-toggle: #7600bd;         /* image and embed show/hide arrows */
  --button-icon: var(--grey-666);          /* react, emoji and upload buttons */
  --button-icon-hover: var(--black);
  --button-outline: var(--border);       /* the react button's box */

  --date-text: var(--base1);
  --date-line: var(--base1);
  --meta-text: var(--base1);
  --meta-text-hover: var(--white);
  --meta-border: var(--base03);           /* nick list edges */
  --meta-controls-bg: var(--tint-controls);
  --meta-controls-hover: var(--base03);

  /* dialogs, the emoji picker and the image uploader */
  --popup-bg: var(--base03);
  --popup-text: var(--base1);
  --popup-text-strong: var(--white);
  --popup-surface: var(--base02);
  --popup-hover: var(--base01);
  --popup-muted: var(--base0);
  --popup-label: var(--base1);
  --popup-border: var(--base01);
  --popup-bevel: var(--base02);
  --color-scheme: dark;          /* form controls inside them */

  --image-border: var(--base01);
  --image-border-hover: var(--base00);
  --embed-border: var(--base01);
  --embed-border-hover: var(--base00);
  --embed-open-border: 1px solid var(--base01);
  --embed-open-border-hover: 1px solid var(--base00);

  --reaction-bg: rgba(255, 255, 255, 0.07);
  --reaction-bg-hover: rgba(255, 255, 255, 0.13);
  --reaction-border: var(--base01);
  --reaction-border-hover: var(--base00);
  --reaction-count: var(--base1);
  --reaction-self-bg: rgba(38, 139, 210, 0.25);
  --reaction-self-bg-hover: rgba(38, 139, 210, 0.35);
  --reaction-self-count: var(--white);
}

/* Slack: its classic default sidebar theme, Aubergine
   (#3F0E40,#350D36,#1164A3,#FFFFFF,#350D36,#FFFFFF,#2BAC76,#CD2553),
   with Slack's light message area */
body.slack {
  --panel-bg: #fff;
  --panel-text: #1d1c1d;
  --topic-bg: #fff;
  --nicks-toggle-bg: #fff;
  --nicks-toggle-icon: #616061;   /* the ⋮ that shows the nick list */
  --foot-bg: transparent;
  --link: #1264a3;
  --link-visited: #1264a3;
  --info-bg: #f8f8f8;
  --info-text: #1d1c1d;

  --input-bg: transparent;
  --input-border: #bbbbbb;
  --input-focus-border: #1d9bd1;
  --input-focus-ring: color-mix(in srgb, #1d9bd1 30%, transparent);
  --input-disabled-bg: #f8f8f8;

  --sidebar-bg: #3f0e40;
  --sidebar-hover: #350d36;
  --sidebar-text: #cfc3cf;
  --sidebar-text-strong: #fff;
  --sidebar-link: #cfc3cf;
  --sidebar-link-disconnected: #9a879a;
  --sidebar-muted: #bcabbc;
  --sidebar-highlight: #cd2553;      /* mention badge */
  --sidebar-alert: #e01e5a;
  --sidebar-active: #1164a3;
  --sidebar-selected: #0e5795;
  --sidebar-menu-bg: #fff;
  --sidebar-menu-hover: #1264a3;
  --sidebar-menu-link: #1d1c1d;
  --sidebar-menu-link-hover: #fff;

  --spinner: #1264a3;
  --highlight-bg: rgba(242, 199, 68, 0.2);   /* rows that mention you */
  --typing-text: #616061;
  --last-read: #e01e5a;          /* the new-messages line */
  --lastlog: #e01e5a;            /* where /last's results start */
  --reconnect-bg: #ecb22e;       /* the disconnected bar */
  --reconnect-text: #1d1c1d;
  --media-toggle: #616061;         /* image and embed show/hide arrows */
  --button-icon: #616061;          /* react, emoji and upload buttons */
  --button-icon-hover: #1d1c1d;
  --button-outline: #dddddd;       /* the react button's box */

  --date-text: #1d1c1d;
  --date-line: #dddddd;
  --meta-text: #1d1c1d;
  --meta-text-hover: #1264a3;
  --meta-border: #dddddd;           /* nick list edges */
  --meta-controls-bg: var(--tint-controls);
  --meta-controls-hover: #f0f0f0;

  /* dialogs, the emoji picker and the image uploader */
  --popup-bg: #fff;
  --popup-text: #1d1c1d;
  --popup-text-strong: #1d1c1d;
  --popup-surface: #fff;
  --popup-hover: #f0f0f0;
  --popup-muted: #616061;
  --popup-label: #616061;
  --popup-border: #dddddd;
  --popup-bevel: #fff;
  --color-scheme: light;          /* form controls inside them */

  --image-border: #dddddd;
  --image-border-hover: #bbbbbb;
  --embed-border: #dddddd;
  --embed-border-hover: #bbbbbb;
  --embed-open-border: none;
  --embed-open-border-hover: none;

  --reaction-bg: rgba(29, 28, 29, 0.06);
  --reaction-bg-hover: rgba(29, 28, 29, 0.1);
  --reaction-border: transparent;
  --reaction-border-hover: rgba(29, 28, 29, 0.3);
  --reaction-count: #1d1c1d;
  --reaction-self-bg: #e8f5fa;
  --reaction-self-bg-hover: #d6eef8;
  --reaction-self-count: #1264a3;
}

/* Slack Dark: Slack's dark mode, with its near-black sidebar */
body.slack-dark {
  --panel-bg: #1a1d21;
  --panel-text: #d1d2d3;
  --topic-bg: #1a1d21;
  --nicks-toggle-bg: #1a1d21;
  --nicks-toggle-icon: #ababad;   /* the ⋮ that shows the nick list */
  --foot-bg: transparent;
  --link: #1d9bd1;
  --link-visited: #1d9bd1;
  --info-bg: #222529;
  --info-text: #d1d2d3;

  --input-bg: transparent;
  --input-border: #565856;
  --input-focus-border: #1d9bd1;
  --input-focus-ring: color-mix(in srgb, #1d9bd1 30%, transparent);
  --input-disabled-bg: #222529;

  --sidebar-bg: #19171d;
  --sidebar-hover: #27242c;
  --sidebar-text: #ababad;
  --sidebar-text-strong: #fff;
  --sidebar-link: #d1d2d3;
  --sidebar-link-disconnected: #8b8b8f;
  --sidebar-muted: #9a9b9e;
  --sidebar-highlight: #cd2553;      /* mention badge */
  --sidebar-alert: #e01e5a;
  --sidebar-active: #1164a3;
  --sidebar-selected: #0e5795;
  --sidebar-menu-bg: #222529;
  --sidebar-menu-hover: #1264a3;
  --sidebar-menu-link: #d1d2d3;
  --sidebar-menu-link-hover: #fff;

  --spinner: #1d9bd1;
  --highlight-bg: rgba(242, 199, 68, 0.12);   /* rows that mention you */
  --typing-text: #ababad;
  --last-read: #e01e5a;          /* the new-messages line */
  --lastlog: #e01e5a;            /* where /last's results start */
  --reconnect-bg: #ecb22e;       /* the disconnected bar */
  --reconnect-text: #1d1c1d;
  --media-toggle: #ababad;         /* image and embed show/hide arrows */
  --button-icon: #ababad;          /* react, emoji and upload buttons */
  --button-icon-hover: #d1d2d3;
  --button-outline: #35373b;       /* the react button's box */

  --date-text: #d1d2d3;
  --date-line: #35373b;
  --meta-text: #d1d2d3;
  --meta-text-hover: #1d9bd1;
  --meta-border: #35373b;           /* nick list edges */
  --meta-controls-bg: #222529;
  --meta-controls-hover: #2c2d30;

  /* dialogs, the emoji picker and the image uploader */
  --popup-bg: #222529;
  --popup-text: #d1d2d3;
  --popup-text-strong: #f8f8f8;
  --popup-surface: #1a1d21;
  --popup-hover: #2c2d30;
  --popup-muted: #ababad;
  --popup-label: #ababad;
  --popup-border: #35373b;
  --popup-bevel: #222529;
  --color-scheme: dark;          /* form controls inside them */

  --image-border: #35373b;
  --image-border-hover: #565856;
  --embed-border: #35373b;
  --embed-border-hover: #565856;
  --embed-open-border: none;
  --embed-open-border-hover: none;

  --reaction-bg: rgba(255, 255, 255, 0.06);
  --reaction-bg-hover: rgba(255, 255, 255, 0.1);
  --reaction-border: transparent;
  --reaction-border-hover: rgba(255, 255, 255, 0.3);
  --reaction-count: #d1d2d3;
  --reaction-self-bg: rgba(29, 155, 209, 0.2);
  --reaction-self-bg-hover: rgba(29, 155, 209, 0.3);
  --reaction-self-count: #1d9bd1;

  --tint-hover: rgba(255, 255, 255, 0.03);   /* message row hover */
}

/* Dark backgrounds: the nick colours too dark to read on Solarized Dark's
   base02 (#073642), lightened in OKLCH to 4.5:1 contrast with their hue
   kept. Slack Dark's #1a1d21 is darker, so they clear 4.5:1 there too. */
body.solarized-dark,
body.slack-dark {
  --nick-0: #ff57b5; /* MediumVioletRed */
  --nick-1: #e27699; /* PaleVioletRed */
  --nick-2: #ff5ba2; /* DeepPink */
  --nick-4: #ff6655; /* Red */
  --nick-5: #ff6758; /* #da1717 */
  --nick-6: #fa695f; /* FireBrick */
  --nick-7: #ff646d; /* Crimson */
  --nick-8: #e97574; /* IndianRed */
  --nick-12: #ff674c; /* Tomato */
  --nick-13: #ff6842; /* OrangeRed */
  --nick-14: #ee7464; /* Maroon */
  --nick-15: #ee736f; /* #bb4545 */
  --nick-16: #e37d4e; /* #c56232 */
  --nick-17: #d28658; /* SaddleBrown */
  --nick-18: #e77c36; /* Chocolate */
  --nick-19: #d08842; /* Peru */
  --nick-20: #c29020; /* DarkGoldenrod */
  --nick-22: #8e90e5; /* #6363b3 */
  --nick-23: #6595ff; /* MediumBlue */
  --nick-24: #7991ff; /* #4040ff */
  --nick-25: #6b94ff; /* RoyalBlue */
  --nick-26: #619ed1; /* SteelBlue */
  --nick-27: #6698f0; /* CornflowerBlue */
  --nick-28: #3e9bff; /* DodgerBlue */
  --nick-32: #9489ff; /* MediumSlateBlue */
  --nick-33: #9589ff; /* SlateBlue */
  --nick-34: #958ee4; /* DarkSlateBlue */
  --nick-35: #b37efa; /* Indigo */
  --nick-36: #f154ef; /* #bd0bbd */
  --nick-37: #e269df; /* DarkMagenta */
  --nick-38: #cb70ff; /* DarkOrchid */
  --nick-39: #c773ff; /* DarkViolet */
}

/* Catppuccin, all four flavours */
body.catppuccin-latte,
body.catppuccin-frappe,
body.catppuccin-macchiato,
body.catppuccin-mocha {
  --panel-bg: var(--ctp-base);
  --panel-text: var(--ctp-text);
  --topic-bg: var(--ctp-mantle);
  --nicks-toggle-bg: var(--ctp-mantle);
  --nicks-toggle-icon: var(--ctp-pink);   /* the ⋮ that shows the nick list */
  --foot-bg: transparent;
  --link: var(--ctp-blue);
  --link-visited: var(--ctp-lavender);
  --info-bg: var(--ctp-surface0);                 /* /info and server lines */
  --info-text: var(--ctp-subtext1);

  --input-bg: transparent;
  --input-border: var(--ctp-surface1);
  --input-focus-border: var(--ctp-lavender);
  --input-focus-ring: var(--ctp-lavender);
  --input-disabled-bg: var(--ctp-surface0);

  --sidebar-bg: var(--ctp-crust);
  --sidebar-hover: var(--ctp-surface0);
  --sidebar-text: var(--ctp-overlay1);
  --sidebar-text-strong: var(--ctp-text);
  --sidebar-link: var(--ctp-subtext0);
  --sidebar-link-disconnected: var(--ctp-overlay0);
  --sidebar-muted: var(--ctp-overlay1);
  --sidebar-highlight: var(--ctp-peach);
  --sidebar-alert: var(--ctp-red);
  --sidebar-active: var(--ctp-surface1);
  --sidebar-selected: var(--ctp-surface2);
  --sidebar-menu-bg: var(--ctp-mantle);
  --sidebar-menu-hover: var(--ctp-surface0);
  --sidebar-menu-link: var(--ctp-subtext0);
  --sidebar-menu-link-hover: var(--ctp-text);

  --spinner: var(--ctp-peach);
  --highlight-bg: color-mix(in srgb, var(--ctp-mauve) 15%, transparent);   /* rows that mention you */
  --typing-text: var(--ctp-overlay1);
  --last-read: var(--ctp-peach);          /* the new-messages line */
  --lastlog: var(--ctp-peach);            /* where /last's results start */
  --reconnect-bg: var(--ctp-peach);       /* the disconnected bar */
  --reconnect-text: var(--ctp-base);
  --media-toggle: var(--ctp-mauve);         /* image and embed show/hide arrows */
  --button-icon: var(--ctp-overlay1);          /* react, emoji and upload buttons */
  --button-icon-hover: var(--ctp-text);
  --button-outline: var(--ctp-surface1);       /* the react button's box */

  --date-text: var(--ctp-overlay1);
  --date-line: var(--ctp-surface1);
  --meta-text: var(--ctp-subtext0);
  --meta-text-hover: var(--ctp-text);
  --meta-border: var(--ctp-surface0);           /* nick list edges */
  --meta-controls-bg: var(--ctp-mantle);
  --meta-controls-hover: var(--ctp-surface0);

  /* dialogs, the emoji picker and the image uploader */
  --popup-bg: var(--ctp-mantle);
  --popup-text: var(--ctp-text);
  --popup-text-strong: var(--ctp-text);
  --popup-surface: var(--ctp-base);
  --popup-hover: var(--ctp-surface0);
  --popup-muted: var(--ctp-overlay1);
  --popup-label: var(--ctp-subtext0);
  --popup-border: var(--ctp-surface1);
  --popup-bevel: var(--ctp-surface0);
  --color-scheme: var(--ctp-scheme);          /* form controls inside them */

  --image-border: var(--ctp-surface1);
  --image-border-hover: var(--ctp-overlay0);
  --embed-border: var(--ctp-surface1);
  --embed-border-hover: var(--ctp-overlay0);
  --embed-open-border: none;
  --embed-open-border-hover: none;

  --reaction-bg: var(--ctp-surface0);
  --reaction-bg-hover: var(--ctp-surface1);
  --reaction-border: var(--ctp-surface1);
  --reaction-border-hover: var(--ctp-overlay0);
  --reaction-count: var(--ctp-subtext0);
  --reaction-self-bg: color-mix(in srgb, var(--ctp-mauve) 20%, transparent);
  --reaction-self-bg-hover: color-mix(in srgb, var(--ctp-mauve) 30%, transparent);
  --reaction-self-count: var(--ctp-mauve);

  /* nicks cycle through the 14 accent colours */
  --nick-0: var(--ctp-rosewater);
  --nick-1: var(--ctp-flamingo);
  --nick-2: var(--ctp-pink);
  --nick-3: var(--ctp-mauve);
  --nick-4: var(--ctp-red);
  --nick-5: var(--ctp-maroon);
  --nick-6: var(--ctp-peach);
  --nick-7: var(--ctp-yellow);
  --nick-8: var(--ctp-green);
  --nick-9: var(--ctp-teal);
  --nick-10: var(--ctp-sky);
  --nick-11: var(--ctp-sapphire);
  --nick-12: var(--ctp-blue);
  --nick-13: var(--ctp-lavender);
  --nick-14: var(--ctp-rosewater);
  --nick-15: var(--ctp-flamingo);
  --nick-16: var(--ctp-pink);
  --nick-17: var(--ctp-mauve);
  --nick-18: var(--ctp-red);
  --nick-19: var(--ctp-maroon);
  --nick-20: var(--ctp-peach);
  --nick-21: var(--ctp-yellow);
  --nick-22: var(--ctp-green);
  --nick-23: var(--ctp-teal);
  --nick-24: var(--ctp-sky);
  --nick-25: var(--ctp-sapphire);
  --nick-26: var(--ctp-blue);
  --nick-27: var(--ctp-lavender);
  --nick-28: var(--ctp-rosewater);
  --nick-29: var(--ctp-flamingo);
  --nick-30: var(--ctp-pink);
  --nick-31: var(--ctp-mauve);
  --nick-32: var(--ctp-red);
  --nick-33: var(--ctp-maroon);
  --nick-34: var(--ctp-peach);
  --nick-35: var(--ctp-yellow);
  --nick-36: var(--ctp-green);
  --nick-37: var(--ctp-teal);
  --nick-38: var(--ctp-sky);
  --nick-39: var(--ctp-sapphire);
}