:root {
    /* Theme colors */
    --application-background: light-dark(#ffffff, #222222);
    --application-icon-background: light-dark(#ffffff, #222222);
    --application-text: light-dark(#000000, #ffffff);
    --application-subtle-text: light-dark(#5f5f5f, #5f5f5f);
    --application-separator: light-dark(#c0c0c0, #4f4f4f);

    --static-section-background: light-dark(#dfdfdf, #2d2d2d);

    --sidebar-background: light-dark(#dddddd, #222222);
    --sidebar-text: light-dark(#000000, #e1e1e1);
    --sidebar-hover-background: light-dark(#bcbcbc, #444444);

    --conversation-background: light-dark(#efefef, #373737);
    --conversation-text: light-dark(#000000, #dddddd);
    --conversation-spoiler: light-dark(#000000, #000000);
    --conversation-topic: light-dark(#707070, #707070);
    --conversation-timestamp: light-dark(#666666, #848484);
    --conversation-highlighted-background: light-dark(#e0e0e0, #242424);
    --conversation-selected-reaction-background: light-dark(#ffffff, #1c1c1c);

    --edit-icon-background: light-dark(#dddddd, #333333);
    --edit-icon-text: light-dark(#000000, #ffffff);

    --button-background: light-dark(#dddddd, #555555);
    --button-border: light-dark(#bcbcbc, #424242);
    --button-text: light-dark(#000000, #ffffff);
    --button-hover-background: light-dark(#bcbcbc, #424242);
    --button-hover-border: light-dark(#bcbcbc, #424242);
    --button-hover-text: light-dark(#000000, #ffffff);

    --input-background: light-dark(#ffffff, #1c1c1c);
    --input-text: light-dark(#000000, #ffffff);
    --input-border: light-dark(#bcbcbc, #6d6d6d);

    --input-button-background: light-dark(#efefef, #373737);
    --input-button-text: light-dark(#000000, #ffffff);
    --input-button-border: light-dark(#bcbcbc, #6d6d6d);
    --input-button-hover-background: light-dark(#bcbcbc, #6d6d6d);
    --input-button-hover-text: light-dark(#000000, #ffffff);
    --input-button-hover-border: light-dark(#bcbcbc, #6d6d6d);
    --input-button-disabled-text: light-dark(#808080, #808080);

    --autocomplete-border: light-dark(#bcbcbc, #6d6d6d);
    --autocomplete-text: light-dark(#000000, #ffffff);
    --autocomplete-background: light-dark(#ffffff, #1c1c1c);
    --autocomplete-selected: light-dark(#aaaaaa, #555555);

    --emojisearch-border: light-dark(#bcbcbc, #6d6d6d);
    --emojisearch-text: light-dark(#000000, #ffffff);
    --emojisearch-background: light-dark(#ffffff, #222222);
    --emojisearch-selected: light-dark(#aaaaaa, #555555);
    --emojisearch-selected-category: light-dark(#000000, #ffffff);

    --attachment-picker-border: light-dark(#bcbcbc, #6d6d6d);
    --attachment-picker-hover: light-dark(#ff0000, #ff0000);
    --attachment-picker-background: light-dark(#ffffff, #222222);
    --attachment-picker-delete-background: light-dark(#ffffff, #222222);
    --attachment-picker-delete-foreground: light-dark(#000000, #ffffff);
    --attachment-picker-alt-text-background: light-dark(#ffffff, #222222);
    --attachment-picker-alt-text-foreground: light-dark(#000000, #ffffff);
    --attachment-picker-alt-text-missing-foreground: light-dark(#505050, #b8b8b8);

    --message-visibility-hover: light-dark(#111bf2, #2b34ed);

    --error-border: light-dark(#b3b3b3, #1c1c1c);
    --error-error: light-dark(#e4a7a7, #d77575);
    --error-warning: light-dark(#e4c9a7, #d0a46d);
    --error-info: light-dark(#a7d0e4, #68a4c2);
    --error-success: light-dark(#bde4a7, #74a659);

    /* Random element colors that don't get themed with light/dark */
    --new-messages-background: #bf32a9;
    --new-messages-text: #ffffff;

    --badge-background: #ff0000;
    --badge-text: #ffffff;

    --roomindicator-background: #ffffff;
    --roomindicator-text: #000000;

    --action-background: #d372fd;
    --action-text: #000000;
    --action-background-grayed: light-dark(#e8e8e8, #383838);
    --action-text-grayed: light-dark(#000000, #ffffff);

    /* Metrics for things that don't change on a per-scale basis */
    --emoji-height: 1.15em;
    --emoji-max-width: 3.45em;
    --big-emoji-height: 2.3em;
    --big-emoji-max-width: 6.9em;

    --input-border-radius: 3px;
}

body {
    color-scheme: light dark;
}

body.light {
    color-scheme: light ! important;
}

body.dark {
    color-scheme: dark ! important;
}