web/styles/app_variables.css - main - githubmirror/zulip

web/styles/app_variables.css
3 300 строк118 KB
sandeep
search: Fix horizontal spacing of close button X icon in user pill.
30 июл 2026, 10:42
30 июл 2026, 10:426e8d7f6
:root {
    /* Zulip color palette */
    /* stylelint-disable color-no-hex */
    /* grey */
    --grey-0: #f7f8fc;
    --grey-50: #f2f3f7;
    --grey-100: #e9ebf2;
    --grey-150: #dfe1e8;
    --grey-200: #cbcdd6;
    --grey-250: #bbbdc8;
    --grey-300: #aaadba;
    --grey-350: #9ea1ae;
    --grey-400: #9194a3;
    --grey-450: #858897;
    --grey-500: #767988;
    --grey-550: #626573;
    --grey-600: #535663;
    --grey-650: #444754;
    --grey-700: #393c49;
    --grey-750: #2d303c;
    --grey-800: #242631;
    --grey-850: #181a25;
    --grey-900: #11131e;
    --grey-950: #0a0c17;
    --grey-1000: #070812;

    /* purple */
    --purple-0: #f3f2fd;
    --purple-50: #ededfc;
    --purple-100: #e5e5fc;
    --purple-150: #dbdaff;
    --purple-200: #c9c7fd;
    --purple-250: #b8b4ff;
    --purple-300: #aba5fd;
    --purple-350: #9e94fd;
    --purple-400: #9283fd;
    --purple-450: #8a70fc;
    --purple-500: #7f63ee;
    --purple-550: #7153dc;
    --purple-600: #5f3cc5;
    --purple-650: #522ab4;
    --purple-700: #4615a3;
    --purple-750: #370386;
    --purple-800: #2c0070;
    --purple-850: #200154;
    --purple-900: #13013a;
    --purple-950: #0d002c;
    --purple-1000: #070020;

    /* violet */
    --violet-0: #f1f3fe;
    --violet-50: #eceefc;
    --violet-100: #e3e6fd;
    --violet-150: #d8dcfc;
    --violet-200: #c3c9fe;
    --violet-250: #b1b7fe;
    --violet-300: #a3a9fc;
    --violet-350: #9398fd;
    --violet-400: #8688fd;
    --violet-450: #7977fe;
    --violet-500: #6e69f3;
    --violet-550: #6159e1;
    --violet-600: #4f42c9;
    --violet-650: #4331b8;
    --violet-700: #381da7;
    --violet-750: #2b0e8a;
    --violet-800: #230773;
    --violet-850: #180557;
    --violet-900: #0e033c;
    --violet-950: #08012e;
    --violet-1000: #050121;

    /* blue */
    --blue-0: #eff3fe;
    --blue-50: #e5edfe;
    --blue-100: #dae5fd;
    --blue-150: #cbdbfd;
    --blue-200: #b4cafd;
    --blue-250: #97b6fe;
    --blue-300: #84a8fd;
    --blue-350: #7199fe;
    --blue-400: #5f8bfc;
    --blue-450: #4d7bfd;
    --blue-500: #406ef6;
    --blue-550: #325ce3;
    --blue-600: #2145cb;
    --blue-650: #1633b9;
    --blue-700: #0f23ac;
    --blue-750: #0a089b;
    --blue-800: #06037c;
    --blue-850: #03025c;
    --blue-900: #020145;
    --blue-950: #010034;
    --blue-1000: #010024;

    /* green */
    --green-0: #ebffee;
    --green-50: #d0fed8;
    --green-100: #b4ffc3;
    --green-150: #a3f9b5;
    --green-200: #82e89a;
    --green-250: #6bd586;
    --green-300: #57c273;
    --green-350: #41ae61;
    --green-400: #2f9f52;
    --green-450: #158f44;
    --green-500: #07833c;
    --green-550: #087736;
    --green-600: #09672e;
    --green-650: #035926;
    --green-700: #054f22;
    --green-750: #05401b;
    --green-800: #013112;
    --green-850: #03260e;
    --green-900: #001d07;
    --green-950: #011505;
    --green-1000: #010d03;

    /* orange */
    --orange-0: #fef4e3;
    --orange-50: #ffeccd;
    --orange-100: #ffda9b;
    --orange-150: #fecb6f;
    --orange-200: #febe3d;
    --orange-250: #f8b325;
    --orange-300: #eba002;
    --orange-350: #db920d;
    --orange-400: #c8850d;
    --orange-450: #ba7401;
    --orange-500: #a96a05;
    --orange-550: #9c5c00;
    --orange-600: #88520c;
    --orange-650: #764607;
    --orange-700: #623b0c;
    --orange-750: #4f2e06;
    --orange-800: #3f2404;
    --orange-850: #321c04;
    --orange-900: #291602;
    --orange-950: #200f01;
    --orange-1000: #180c03;

    /* red */
    --red-0: #fcf3f2;
    --red-50: #ffe4e0;
    --red-100: #ffd4cd;
    --red-150: #ffbfb5;
    --red-200: #fea497;
    --red-250: #ff8b7c;
    --red-300: #fd7465;
    --red-350: #fd5f50;
    --red-400: #f34c3e;
    --red-450: #e1392e;
    --red-500: #d22720;
    --red-550: #c0070a;
    --red-600: #ac0508;
    --red-650: #960708;
    --red-700: #7c0203;
    --red-750: #650102;
    --red-800: #4f0001;
    --red-850: #400101;
    --red-900: #330201;
    --red-950: #280100;
    --red-1000: #1a0200;

    color-scheme: light;

    /* Variable for setting the viewport to full height.
       As of late 2025, we still support browsers (e.g.,
       Chrome 105) that do not support dynamic viewport
       units. 100% is the legacy full-height value. */
    --full-height-dynamic-viewport: 100%;

    /* Exposed so callers can reserve matching padding on a
       resizable box, keeping handles out of the clickable content
       area. Consumed by box_resize.css. */
    --resizable-box-handle-size: 10px;

    /* GIF picker overlay: resize bounds are expressed in columns so
       the picker resizes to useful sizes. Tweaking these retunes the
       bounds, grid columns, and gap together. */
    --gif-picker-gif-column-min-width: 200px;
    --gif-picker-gif-column-gap: 6px;
    /* Horizontal chrome inside .gif-grid-in-popover around the grid
       columns, measured against its border-box. Breakdown: 3px × 2
       .gif-scrolling-container margin, 2px × 2 .gif-picker-content
       padding, and handle-size padding on each side reserved for
       resize handles. SimpleBar's scrollbar is a positioned overlay
       and doesn't take content width, so nothing extra is reserved
       for it. Keep in sync with popovers.css. */
    --gif-picker-grid-horizontal-chrome: calc(
        10px + 2 * var(--resizable-box-handle-size)
    );
    --gif-picker-viewport-safe-margin: 20px;

    /* Min = 1 column. Max = 5 columns, capped at viewport minus safe
       margins. */
    --gif-picker-grid-min-width: calc(
        var(--gif-picker-gif-column-min-width) +
            var(--gif-picker-grid-horizontal-chrome)
    );
    --gif-picker-grid-max-width: min(
        calc(
            5 * var(--gif-picker-gif-column-min-width) + 4 *
                var(--gif-picker-gif-column-gap) +
                var(--gif-picker-grid-horizontal-chrome)
        ),
        calc(100vw - 2 * var(--gif-picker-viewport-safe-margin))
    );
    /* Room for the search input, one row of GIFs, the footer, and
       the outer handle-size padding on the top and bottom. */
    --gif-picker-grid-min-height: calc(
        300px + 2 * var(--resizable-box-handle-size)
    );
    --gif-picker-grid-max-height: calc(
        100vh - 2 * var(--gif-picker-viewport-safe-margin)
    );

    @supports (height: 100dvh) {
        --full-height-dynamic-viewport: 100dvh;
        --gif-picker-grid-max-height: calc(
            100dvh - 2 * var(--gif-picker-viewport-safe-margin)
        );
    }

    /*
    This is the header, aka the navbar.
    */
    --header-height: 2.5em; /* 40px at 16px em */
    --header-line-height: 40px;
    /*
    At 600px, the header starts taking up more than 5%
    of the screen. We make it shorter to leave more space
    to see the rest of the app. */
    @media (height < $short_navbar_cutoff_height) {
        --header-height: 1.875em; /* 30px at 16px em */
    }

    /*
    Height of the search box, which appears in the header.
    */
    --search-box-height: 2em; /* 32px at 16px em */
    --search-box-width: 9.375em; /* 150px at 16px em */

    @media (width < $md_min) {
        --search-box-width: 2.5em; /* 40px at 16px em */
    }

    /*
        On very short screens, the search box's height becomes
        is reduced to fit the available space.
    */
    @media (height < $short_navbar_cutoff_height) {
        --search-box-height: 1.75em; /* 28px at 16px em */
    }

    --search-pill-label-min-width: 2.5em; /* 35px at 14px/em */

    /*
    This is the space for the searchbar's search icon, and the left padding
    for the search suggestions so they match up with searchbar content.
    */
    --search-left-padding: 35px;

    /*
    Since #navbar_alerts_wrapper can take variable height depending upon
    window width / language, we sync its height in navbar_alerts.js
    */
    --navbar-alerts-wrapper-height: 0px;
    --navbar-fixed-height: calc(
        var(--header-height) + var(--navbar-alerts-wrapper-height)
    );
    /* Keep content from colliding with the search box. */
    --navbar-content-righthand-offset: 5px;

    /*
    We have a 10px gutter below the header,
    which often needs to be respected by both
    the elements above it and below it on
    the y-axis, due to absolute positioning.
    */
    --header-padding-bottom: 10px;

    /*
    Our sidebars (and anything that top-align
    with them) go beneath the header.
    */
    /* The width of the empty space in the sidebar to separate
       content from the edge of the window */
    --left-sidebar-padding-left: 8px;
    /* The empty space between left-sidebar row icons and
       the row content.
       7px at 16px/1em */
    --left-sidebar-icon-content-gap: 0.4375em;
    /* The space allotted in gridded rows for the toggle icon. */
    --left-sidebar-header-icon-toggle-width: 20px;
    /* 26px at 16px/1em */
    --left-sidebar-vdots-width: 1.625em;
    /* Other rows need an offset to preserve a column the
       entire height of the left sidebar for where toggles sit. */
    --left-sidebar-toggle-width-offset: var(
        --left-sidebar-header-icon-toggle-width
    );
    --right-sidebar-header-icon-toggle-width: 20px;
    --right-sidebar-toggle-width-offset: calc(
        var(--right-sidebar-header-icon-toggle-width) - 4px
    );
    /* This represents the space in the sidebar reserved for symbols like
       the #; labels like the stream name go to the right of this. */
    --left-sidebar-icon-column-width: 1em;
    /* Offset on unreads to make New topic button appear centered. */
    --left-sidebar-unread-offset: 6.5px;
    /* space direct message / stream / topic names from unread counters
    and @ mention indicators by 3px on the right */
    --left-sidebar-before-unread-count-padding: 3px;
    /* 15px is the approximate width of a single-digit
       unread marker. */
    /* 15px at 8px/1em (masked unreads are sized to 0.5em) */
    --left-sidebar-single-digit-unread-width: 1.875em;
    --left-sidebar-right-margin: 12px;
    /* 289px at 14px/1em */
    --left-sidebar-max-width: calc(
        20.6429em - var(--left-sidebar-right-margin)
    );
    --realm-logo-max-width: 12.5em; /* 200px at 16px em */
    /* Value updated on realm_logo.render() */
    --realm-logo-current-width: var(--realm-logo-max-width);
    /* 10px is just extra margin for content separation */
    --middle-column-left-margin-fluid-layout: calc(
        var(--header-height) + var(--realm-logo-current-width) + 10px
    );
    /* Sidebar width is 1/3 of the screen at smaller
       sizes, but gets held to the left sidebar's max width.
       This is very useful for areas in the CSS codebase
       that rely on this value, but not necessarily as
       applied to `width:` or `max-width:`. */
    --left-sidebar-width: min(33.3333vw, var(--left-sidebar-max-width));
    --right-sidebar-left-spacing: 5px;
    /* 50px per icon * 4 icons + 3px space (legacy) = 203px at 20px/1em */
    --right-column-collapsed-sidebar-width: 10.15em;
    /* 288px at 14px/1em */
    --right-sidebar-max-width: 20.57em;
    /* We open the right sidebar at xl_min at a size of 240px,
       here expressed as precisely 20% of the viewport. */
    --right-sidebar-width: min(20vw, var(--right-sidebar-max-width));
    /* 25px at 16px/1em */
    --right-sidebar-vdots-width: 1.5625em;
    /* The width of the icon is reduced by 2px, to account for 2px
       of top and bottom margin needed for hover backgrounds to
       not touch the row outline. */
    --left-sidebar-header-icon-width: calc(1.7142em - 2px); /* 24px / 14px em */
    /* Space between section in the left sidebar. */
    --left-sidebar-sections-vertical-gutter: 8px;
    /* The legacy value here is 25px; that's the unitless legacy line-height
       of 20px, plus 5px at 14px/1em */
    --left-sidebar-bottom-scrolling-buffer: calc(
        (var(--legacy-body-line-height-unitless) * 1em) + 0.3571em
    );
    /* Used in both left and right sidebar at the bottom, to allow
       the user to scroll past the bottom-most elements a little bit.

       Value is chosen to avoid elements overlapping with the browser's URL
       display when hovering links, and should not scale with font size. */
    --sidebar-bottom-spacing: 25px;
    --sidebar-filter-bottom-spacing: 3px;

    /* 5px / 16px em */
    --left-sidebar-direct-messages-bottom-divider-padding: 0.3125em;

    /* Left sidebar modal */
    /* Close area height chosen by playing around with different heights and this one felt best. */
    --left-sidebar-modal-close-area-height: 1.9em;
    --left-sidebar-modal-close-area-padding-top: calc(
        1.9em + var(--header-padding-bottom)
    );

    /* We base sidebar row heights on their line heights.
       Prominent rows include things like headers (e.g., VIEWS)
       as well as navigation items. Everything else takes
       the smaller line-height. */
    --line-height-sidebar-row-prominent: 1.7142em; /* 24px / 14px em */
    --line-height-sidebar-row: 1.5714em; /* 22px / 14px em */
    --line-height-sidebar-row-with-avatars: 1.3571em; /* 19px / 14px em */
    --line-height-sidebar-topic-inner: 1.2em;
    /* This spacing value is to compensate for the
       additional space of the prominent row-height
       from within the inner topic value. */
    --spacing-top-bottom-sidebar-topic-inner: calc(
        (
                var(--line-height-sidebar-row-prominent) -
                    var(--line-height-sidebar-topic-inner)
            ) /
            2
    );

    /* Right sidebar */
    /* Vlad's design adds 2px of extra padding beyond the
       space created by the padding-left on .right-sidebar,
       which separates the right sidebar from the message area. */
    --right-sidebar-padding-left: 2px;
    --right-sidebar-heading-left-spacing: 5px;
    --right-sidebar-avatar-width: 2em;
    --right-sidebar-avatar-height: var(--right-sidebar-avatar-width);
    --right-sidebar-avatar-right-margin: 0.85ch;
    --right-sidebar-presence-circle-width: 1.4285em; /* 20px at 14px em */
    /* toggle + avatar + avatar margin + 2px border */
    --right-sidebar-text-indent-with-avatar: calc(
        var(--right-sidebar-header-icon-toggle-width) / 2 +
            var(--right-sidebar-avatar-width) +
            var(--right-sidebar-avatar-right-margin) + 2px
    );
    --right-sidebar-text-indent-without-avatar: calc(
        var(--right-sidebar-toggle-width-offset) +
            var(--right-sidebar-presence-circle-width)
    );

    /* Tippy popover related values */
    --navbar-popover-menu-min-width: 230px;
    --message-actions-popover-min-width: 230px;
    --user-group-info-popover-min-width: 16.4285em; /* 230px / 14px em */
    --topic-actions-popover-min-width: 200px;
    --user-card-popover-min-width: 200px;
    --stream-card-popover-min-width: 16.4285em;

    /* Image and video thumbnail sizing; updated via JavaScript */
    --media-preview-max-height: 10em;

    /* Information density and typography values */
    /* The legacy values here are updated via JavaScript */
    --base-font-size-px: 14px;
    --base-line-height-unitless: 1.214;
    --base-maximum-block-height-em: 1.425em;
    --line-fitted-vertical-align-offset-em: 0;
    --markdown-interelement-space-px: 5px;
    --markdown-interelement-doubled-space-px: calc(
        var(--markdown-interelement-space-px) * 2
    );
    --markdown-interelement-halved-space-px: calc(
        var(--markdown-interelement-space-px) / 2
    );
    /* Certain elements need to be fitted perfectly to
       the line height; the length here can be used to set
       precise heights, and in the case of square elements,
       a matching precise width as well. */
    --length-line-fitted-block: calc(var(--base-line-height-unitless) * 1em);
    /* Emoji elements are allowed to exceed the perfectly-fit
       line-height. Classic Zulip emoji sizing is a 20px square
       emoji at a 14px font-size, for 1.4286em at 14px/1em. */
    --length-line-oversize-block: 1.4286em;
    /* To avoid disturbing the flow of text around emoji or other
       oversize inline blocks, we calculate a negative margin
       adjustment for offsetting the emoji, top and bottom. */
    --length-line-oversize-block-margin-adjust: calc(
        (
                (
                        min(
                            var(--base-maximum-block-height-em),
                            var(--length-line-fitted-block)
                        )
                    ) -
                    var(--length-line-oversize-block)
            ) /
            2
    );

    /* Legacy values */
    --legacy-body-line-height-unitless: calc(20 / 14);

    /* Special effects */
    --pulse-unread-scale-max: 1.5;

    /* Message area */
    /* In the legacy layout at 16px/1em density, 918.6px is
       the widest the message area gets, so we preserve this
       value to better present a readable message area across
       different info densities and the manual hiding of the
       left and right sidebars.
       918.6px at 16px/1em
    */
    --message-area-max-width: 57.4125em;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: none;

    /* Shared sidebar typography and effects values. */
    --font-weight-sidebar-heading: 600;
    --font-weight-sidebar-action-heading: 370;
    --font-variant-sidebar-action-heading: all-small-caps;
    --font-feature-settings-sidebar-action-heading: "c2sc", "smcp";
    /* 17px at 16px/1em = 1.0625em */
    --font-size-sidebar-action-heading: 1.0625em;
    --text-transform-sidebar-action-heading: uppercase;
    --letter-spacing-sidebar-heading: 0.0469em;
    --opacity-sidebar-heading: 0.7;
    --opacity-sidebar-heading-icon: 0.5;
    --opacity-sidebar-heading-hover: 0.9;
    --opacity-left-sidebar-muted: 0.55;
    --opacity-left-sidebar-muted-hover: 0.75;
    --opacity-unread-mention-info: 0.5;
    /* Since --opacity-unread-mention-info is too close to
       --opacity-left-sidebar-muted */
    --opacity-left-sidebar-muted-mentions: 0.3;
    --opacity-right-sidebar-subheading: 0.65;
    --opacity-right-sidebar-subheading-hover: 0.9;
    --opacity-readonly-modal-input: 0.5;
    --opacity-disabled-profile-field-choice-input: 0.7;

    /*
    Message box elements and values.
    */
    /* At very tight line-heights, the focus ring on
       links can get cut off on paragraphs and list
       items that open the senderless message area.
       This padding fixes the cut-off problem, and
       can be used to adjust padding elsewhere in the
       message area as needed.
       2px at 20px/1em */
    --message-box-link-focus-ring-block-padding: 0.1em;
    /* 35px at 14px/1em */
    --message-box-avatar-width: 2.5em;
    --message-box-avatar-height: var(--message-box-avatar-width);
    /* 46px at 14px/1em */
    --message-box-avatar-column-width: 3.2857em;
    /* Increase the margin here to account for the
       focus ring, which is offset by -1px, as well
       as the vertical height between the hover icons
       and focus ring. */
    --message-box-vertical-margin: calc(
        var(--markdown-interelement-space-px) * 1.4
    );
    --message-box-markdown-aligned-vertical-space: var(
        --markdown-interelement-space-px
    );
    /* 22px matches to the width of the padded icon.
       22px at 16px/1em
    */
    --message-box-icon-width: 1.375em;
    /* 25px at 16px/1em */
    --message-box-icon-height: 1.6667em;
    --message-box-height-senderless-single-line-message: calc(
        var(--base-line-height-unitless) * var(--base-font-size-px) +
            calc(var(--markdown-interelement-space-px) * 2)
    );
    /* The line-height on the sender line should coordinate with the
       height of a single-line, senderless message, but never be smaller
       than the height of the hover icons. The sender line never wraps,
       so this just keeps everything in line with the grid definition. */
    --message-box-sender-line-height: max(
        var(--message-box-icon-height),
        var(--message-box-height-senderless-single-line-message)
    );
    /* This width is updated with an exact pixel
       width upon UI initialization. */
    --message-box-timestamp-column-width: 0;
    --last-message-row-border-radius: 0 0 7px 7px;

    /* This length is the primary reference for height
       and image width on URL preview embeds. 112px
       comes from the height of a two-line title and a
       two-line description at a +2 (maximum)
       line-height setting.
       112px at 16px/1em */
    --length-message-preview-embeds: 7em;

    /*
    Reaction container UI scaling.
    */
    --scale-message-reaction-active: 0.96;

    /* Message group bookend and date row UI */
    --color-border-message-group-spacer-line: light-dark(
        color-mix(in oklch, hsl(0deg 0% 0%) 15%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 15%, transparent)
    );

    /*
    Left position of unread marker. Only needs to be tracked if it is negative so that
    it doesn't leak through message header.
    */
    --unread-marker-left: -1px;

    /*
    Compose-recipient box minimum height. Used in a flexbox context to
    allow elements like DM pills to stack without breaking out of their
    flex item. 2em is 32px at 16px/1em.
    */
    --compose-recipient-box-min-height: 2em;
    /* 28px at 14px/1em */
    /* Note that this variable can only be used in contexts where
       the font-size doesn't deviate from the base font-size;
       that excludes contexts like .compose_control_button, which
       uses font-sizing to adjust the size of the icon. Related
       values have been noted in comments with this variable name,
       to make their coordination a little less painful. */
    --compose-formatting-buttons-row-height: 2em;

    /*
    Width of the area where the compose box buttons are placed, "inside"
    the right edge of the compose box. This is used for the negative right
    margin and the right padding of the textbox to extend it into the compose
    expand / collapse buttons area, but keep the text from showing under the
    the buttons.
    */
    --composebox-buttons-width: 24px;

    /*
    Width of the send menu area with the Send button, Draft(s) button
    and the vdots.
    */
    --compose-send-controls-width: 112px;

    @media ((width >= $sm_min) and (width < $mc_min)) {
        --compose-send-controls-width: 62px;
    }

    @media (width < $sm_min) {
        --compose-send-controls-width: 28px;
    }

    /* Compose-specific transitions and delays. */
    --compose-recipient-row-transition-delay: 100ms;
    --compose-recipient-row-transition: 150ms ease;

    /*
    User group info popover elements and values.
    */
    --user-group-popover-horizontal-padding: 0.6666em; /* 10px at 15px/1em */
    --user-group-popover-icon-text-gap: 0.3125em; /* 5px at 16px/1em */

    /*
    This isn't scaled with font-size because the flatpickr is a third
    party component that doesn't scale with font size.
    */
    --flatpickr-confirm-button-font-size: 18px;

    /*
    Width to be reserved for document scrollbar when scrolling is disabled.
    Using `scrollbar-gutter` would be more appropriate but doesn't has wide
    support and doesn't work for `fixed` elements.
    */
    --disabled-scrollbar-width: 0px;

    /*
    Right offset of simplebar scrollbar for `.column-right` when browser has
    overlay scrollbars which don't occupy any space. Currently only
    known to present on Mac (all browsers) and Firefox (all OS?). This seems
    more than enough to differentiate right sidebar scrollbar and browser
    scrollbar even if the browser scrollbar is wider.
    */
    --browser-overlay-scrollbar-width: 10px;

    /*
    Sometimes it's necessary to keep elements, especially those with hover
    controls or other interactivity, from appearing beneath Simplebar scroll
    bars.
    */
    --width-simplebar-scroll: 11px;
    --width-simplebar-scroll-hover: 15px;

    /* This is the height occupied by Recent Conversations filters,
       based on the height of the new filter elements in the sidebars
       and for the topics filter. 31px at 16px/1em. */
    --recent-topics-filters-height: 1.9375em;
    /* Legacy margin/flex-gap value for filters. 10px at 14px/1em. */
    --recent-topics-filters-gap: 0.7142em;

    /* Pill dimensions. */
    /* 1.5714em is 22px (border-inclusive) at 14px/1em */
    --height-input-pill: 1.5714em;
    /* Reduce user pill height by 2px to preserve an apparent border
       around them even under `box-sizing: border-box` in the area. */
    --length-user-pill-height: calc(var(--height-input-pill) - 2px);
    /* Fills whole pill height. */
    --length-search-pill-image: var(--length-user-pill-height);
    --length-input-pill-exit: 1.1429em; /* 16px at 14px/em */
    /* Right margin reserved next to .exit and .expand in input_pill.css.
       Anything aligning to the exit button must include this margin. */
    --length-input-pill-exit-margin: 2px;
    --input-pill-side-padding: 0.3571em; /* 5px at 14px/em */
    --vertical-spacing-input-pill: 2px;
    --outer-spacing-input-pill-container: var(--vertical-spacing-input-pill);
    --horizontal-spacing-input-pill: 6px;

    /* User circles. */
    /* 8px at 14px/1em */
    --length-user-status-circle: 0.5714em;
    /* Shrink the user activity circle for the Recent Conversations context. */
    /* 7px at 14px/1em */
    --length-user-status-circle-recent-conversations: 0.5em;
    --length-user-status-circle-popover-menu: 8px;
    --length-user-popover-menu-avatar: 64px;

    /* Buttons */
    --icon-button-padding: 0.375em;

    /* Overlay heights for streams modal */
    --overlay-container-height: 95vh;
    --overlay-container-max-height: 1000px;
    /* The width of the settings sidebar. */
    --settings-sidebar-width: 18.2142em; /* 255px at 14px/em */
    /* .two-pane-settings-header and .settings-header */
    --settings-overlay-header-height: 3.2143em; /* 45px at 14px/em */
    /* .display-type and .list-toggler-container
       in subscriptions and user group settings overlays */
    --settings-overlay-subheader-height: 3.1429em; /* 44px at 14px/em */
    --settings-overlay-header-button-height: 2em;
    /* Informational overlay */
    --informational-overlay-max-width: 43.75em;
    --modal-input-width: 23.2142em;
    /* Dropdown menu width. This is a legacy value that comes from bootstrap.
       See 1c6bed55e4e800b5bad7150f6bdd274cd7f6504e for more context. */
    --width-dropdown-widget-button: 206px;
    /* User profile modal */
    --user-profile-modal-height: 75dvh;
    --user-profile-modal-body-margin-bottom: 20px;
    /* Dropdown list item */
    --dropdown-list-item-label-icon-gap: 0.3125em; /* 5px at 16px/em */

    /* Height of the button for filter dropdown in stream settings UI.
    It is set equal to the height of the search input, i.e. 1.4em (input
    height with font size set to 90%) + 8px (top and bottom paddings)
    + 2px (top and bottom borders). */
    --folder-filter-dropdown-widget-button-height: calc(
        1.4 * 0.9 * var(--base-font-size-px) + 8px + 2px
    );

    /*
    Maximum height of the compose box when it is not in maximised state. This
    is equal to the height of `#bottom_whitespace`. We expect resize.ts to
    replace it with its pixel calculation since even if `vh` has great support,
    it can change depending on browser / OS on mobile devices.
    */
    --max-unmaximized-compose-height: 40vh;

    /* Maximum height of the message-edit and preview areas. */
    --max-message-edit-height: 24em;

    /*
    Line height of the message buttons in compose box. Here it's necessary
    to control this value uniformly and precisely to avoid issues with
    layout shifts originating with non-Latin characters in this area.
    1.429em is 20px at 14px em.
    */
    --line-height-compose-buttons: 1.429em;

    /*
    Maximum height of the subscribers list in stream settings so that
    it doesn't cause the container to have a second scrollbar.
    This value will be overridden when stream settings is opened.
    */
    --stream-subscriber-list-max-height: 100%;
    /*
      Reusable dimensions and offsets.
    */
    --margin-bottom-field-description: 3px;
    /* Gap between tabs in the tab picker */
    --grid-gap-tab-picker: 2px;
    /* 10px at 16px */
    --view-only-field-horizontal-padding: 0.625em;

    /*
    The tippy arrow which matches the color of the popover's border,
    is formed by stacking two arrows on top of each other, via the
    use of `::before` and `::after` pseudo-elements. This value overrides
    the offset of the `::before` pseudo element to create a thicker border,
    visually consistent with that of it's parent popover.
    */
    --popover-tippy-arrow-before-offset: -6.5px;

    /* Decorated channel name related values */
    --decorated-channel-name-privacy-icon-gap: 0.3125em; /* 5px at 16px/em */
    --inline-decorated-channel-name-privacy-icon-gap: 0.125em; /* 2px at 16px/em */
    --inline-decorated-channel-name-padding-left: 0.0937em; /* 1.5px at 16px/em */

    /* Color picker popover values */
    --size-color-swatch: 1em;
    --grid-gap-color-swatch: 1em;
    --padding-color-swatch-list: 0.6666em;
    --gradient-custom-swatch: conic-gradient(
        from 0deg at 50% 50% in oklch longer hue,
        oklch(70% 0.3 0deg) 0%,
        oklch(70% 0.3 0deg) 100%
    );

    /* Banner grid layout variables */
    --banner-horizontal-padding: 0.8125em; /* 13px at 16px/1em */
    --banner-vertical-padding: 0.3125em; /* 5px at 16px/1em */
    --banner-grid-template-areas: " . . banner-close-button banner-close-button"
        ". banner-content banner-close-button banner-close-button"
        ". . banner-close-button banner-close-button";
    --banner-grid-template-columns: var(--banner-horizontal-padding)
        minmax(0, 1fr) minmax(0, auto) var(--banner-horizontal-padding);
    --banner-grid-template-rows: 0.3125em auto 0.3125em; /* 5px at 16px/1em */

    /* Popup banner related variables */
    --popup-banner-translate-y-distance: 100px;

    /* Input grid layout variables */
    --input-icon-starting-offset: 0.5em; /* 8px at 16px/1em */
    --input-icon-width: 1em; /* 16px at 16px/1em */
    --input-icon-content-gap: 0.4375em; /* 7px at 16px/1em */
    --input-button-content-gap: 0.25em; /* 4px at 16px/1em */
    --input-button-width: 1.5em; /* 24px at 16px/1em */
    --input-button-ending-offset: 0.125em; /* 2px at 16px/1em */

    /* Input padding and border variables */
    --input-horizontal-padding: 6px;
    --input-vertical-padding: 4px;
    --schedule-reminder-note-padding: 3px;
    --input-border-width: 1px;

    /* Message date divider variables */
    --date-divider-text-padding: 12px;
    --date-divider-line-gap: 4px;
    --date-divider-right-edge-offset: 2px;
    --date-divider-line-inset: calc(
        var(--date-divider-text-padding) - var(--date-divider-line-gap)
    );

    /* Colors used across the app */
    --color-date: light-dark(hsl(0deg 0% 15% / 75%), hsl(0deg 0% 100% / 75%));
    --color-background-private-message-header: light-dark(
        hsl(46deg 35% 93%),
        hsl(46deg 15% 20%)
    );
    --color-background-private-message-content: light-dark(
        hsl(45deg 20% 96%),
        hsl(46deg 7% 16%)
    );
    --color-background-stream-message-content: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 13.5%)
    );
    --color-selected-message-outline: light-dark(
        hsl(217deg 64% 59% / 60%),
        hsl(217deg 64% 59% / 70%)
    );
    --color-selected-gif-in-grid-picker: light-dark(
        hsl(217deg 75% 59%),
        hsl(217deg 95% 59%)
    );
    --color-hovered-gif-in-grid-picker: light-dark(
        hsl(217deg 75% 59% / 50%),
        hsl(217deg 95% 59% / 60%)
    );
    --color-message-list-border: light-dark(
        hsl(0deg 0% 0% / 16%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-message-header-contents-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-private-message-header-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 48%)
    );
    --color-message-header-contents-border-bottom: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-private-message-header-border-bottom: light-dark(
        hsl(0deg 0% 0% / 7%),
        hsl(0deg 0% 0% / 37%)
    );
    --color-message-header-icon-non-interactive: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 30%)
    );
    --color-message-header-icon-interactive: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background: light-dark(hsl(0deg 0% 94%), hsl(0deg 0% 11%));
    --color-background-widget-input: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 10%)
    );
    --color-background-widget-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-navbar: light-dark(hsl(0deg 0% 97%), hsl(0deg 0% 13%));
    --color-text-sidebar-row: light-dark(
        hsl(0deg 0% 20%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-text-active-narrow-filter: light-dark(
        hsl(0deg 0% 15%),
        hsl(0deg 0% 90%)
    );
    --color-background-active-narrow-filter: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in srgb, hsl(0deg 0% 100%) 8%, hsl(0deg 0% 11%))
    );
    --color-background-hover-narrow-filter: light-dark(
        hsl(0deg 0% 97%),
        color-mix(in srgb, hsl(0deg 0% 97%) 8%, hsl(0deg 0% 11%))
    );
    --color-shadow-sidebar-row-hover: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 30%)
    );
    /* Layered drop shadow for sticky sidebar headers when scrolled content
       passes beneath them. Dark mode overrides to full-opacity black in the
       dark-theme block below, since shadows over a dark background need more
       contrast to read as "something is floating above." */
    --box-shadow-sidebar-sticky-header-drop:
        0 1px 1px -1px hsl(0deg 0% 0% / 25%),
        0 3px 4px -5px hsl(0deg 0% 0% / 40%),
        0 4px 9px -10px hsl(0deg 0% 0% / 45%),
        0 12px 12px -13px hsl(0deg 0% 0% / 30%);
    --color-sidebar-action: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-sidebar-action-hover: light-dark(
        hsl(240deg 100% 15%),
        hsl(240deg 100% 90%)
    );
    --color-background-sidebar-action-hover: light-dark(
        hsl(240deg 100% 93%),
        hsl(240deg 25% 35%)
    );
    --color-background-navigation-item-hover: light-dark(
        hsl(240deg 100% 50% / 7%),
        hsl(240deg 100% 75% / 20%)
    );
    --color-background-sidebar-action-heading-hover: var(
        --color-background-navigation-item-hover
    );
    --color-navbar-bottom-border: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-left-sidebar-direct-messages-bottom-divider: light-dark(
        hsl(0deg 0% 0% / 15%),
        hsl(0deg 0% 100% / 15%)
    );
    --color-left-sidebar-inner-box-shadow: light-dark(
        hsl(0deg 0% 0% / 20%),
        hsl(0deg 0% 0% / 80%)
    );
    --color-left-sidebar-middle-box-shadow: var(--color-background);
    --color-left-sidebar-outer-box-shadow: light-dark(
        hsl(0deg 0% 94% / 20%),
        hsl(0deg 0% 11% / 30%)
    );
    --color-left-sidebar-middle-box-shadow-hover: light-dark(
        hsl(244deg 36% 91%),
        hsl(240deg 19% 24%)
    );
    --color-left-sidebar-outer-box-shadow-hover: light-dark(
        hsl(240deg 100% 50% / 7%),
        hsl(240deg 100% 75% / 20%)
    );
    --color-unread-marker: hsl(217deg 64% 59%);
    --color-masked-unread-marker: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 30%)
    );
    --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
    --color-active-row-modal: light-dark(
        hsl(0deg 0% 98%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-overlay: light-dark(
        hsl(0deg 0% 13% / 80%),
        hsl(212deg 28% 8% / 75%)
    );
    --color-background-non-empty-overlay-indicator: light-dark(
        hsl(0deg 0% 100% / 90%),
        hsl(212deg 28% 8% / 75%)
    );
    --color-modal-selectable-icon: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-modal-selectable-icon-hover: light-dark(
        hsl(240deg 100% 15%),
        hsl(240deg 100% 90%)
    );
    --background-color-modal-selectable-icon-hover: light-dark(
        hsl(240deg 100% 50% / 7%),
        hsl(240deg 100% 75% / 20%)
    );
    --background-color-readonly-modal-input: light-dark(
        hsl(240deg 7% 93%),
        hsl(240deg 7% 17%)
    );
    --background-color-textarea: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --background-color-disabled-textarea: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --background-color-view-only-textarea: light-dark(
        hsl(0deg 0% 100% / 60%),
        hsl(0deg 0% 0% / 30%)
    );
    --border-color-textarea: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --focus-border-color-textarea: light-dark(
        hsl(206.5deg 80% 62% / 80%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-background-pill-container-without-placeholder: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-unmuted-or-followed-topic-list-item: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-topic-indent-border: light-dark(
        hsl(0deg 0% 0% / 19%),
        hsl(0deg 0% 100% / 19%)
    );
    --color-outline-focus: hsl(215deg 47% 50%);
    --focus-ring-width-in-views: 1.5px;
    /* Standard focus ring stroke; used by `:focus-visible`
       outlines on inbox rows, recent-view rows, action-button
       wrappers, unread badges, etc. so that a future width or
       color change touches one place. */
    --focus-ring-outline: var(--focus-ring-width-in-views) solid
        var(--color-outline-focus);
    /* Negative-offset paired with `--focus-ring-outline` to pull
       the painted ring inside the element by its own stroke
       width, so the ring sits flush with the element edges (used
       by inbox row outlines that would otherwise clip against the
       row's `overflow: hidden`). */
    --focus-ring-outline-offset-in-views: calc(
        -1 * var(--focus-ring-width-in-views)
    );
    --unread-count-focus-outline-radius-in-views: 0.5em; /* 8px at 16px/1em */
    --color-background-search: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 17%));
    --color-background-search-collapsed: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 20%)
    );
    --color-background-search-option-hover: light-dark(
        hsl(0deg 0% 94%),
        hsl(0deg 0% 20%)
    );
    --color-search-box-hover-shadow: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 30%)
    );
    --color-search-shadow-wide: hsl(0deg 0% 0% / 25%);
    --color-search-shadow-tight: hsl(0deg 0% 0% / 10%);
    --color-search-dropdown-top-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 35%)
    );
    --color-search-icons: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 78%));
    --color-background-image-loader: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 10%)
    );
    --color-icon-purple: hsl(240deg 35% 60%);
    --color-background-popover-menu: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 17%)
    );
    --color-border-popover-menu-separator: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-hotkey-hint: light-dark(hsl(227deg 78% 59%), hsl(225deg 100% 84%));
    --color-popover-hotkey-hint: light-dark(hsl(0deg 0% 40%), hsl(0deg 0% 65%));
    --color-border-popover-hotkey-hint: light-dark(
        hsl(0deg 0% 40% / 50%),
        hsl(0deg 0% 65% / 50%)
    );
    --color-background-hover-popover-menu: light-dark(
        hsl(220deg 12% 5% / 5%),
        hsl(220deg 12% 95% / 5%)
    );
    --color-background-active-popover-menu: light-dark(
        hsl(220deg 12% 5% / 7%),
        hsl(220deg 12% 95% / 7%)
    );
    --color-border-popover-menu: light-dark(
        hsl(0deg 0% 0% / 40%),
        hsl(0deg 0% 0%)
    );
    --color-border-personal-menu-avatar: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-background-unread-counter-prominent: light-dark(
        hsl(240deg 10% 50% / 70%),
        hsl(240deg 18.37% 34.42%)
    );
    --color-background-unread-counter-normal: light-dark(
        hsl(240deg 10% 50% / 20%),
        hsl(240deg 10% 50% / 35%)
    );
    --color-background-unread-counter-quiet: transparent;
    --box-shadow-unread-counter-normal: inset 0 0 1px hsl(0deg 0% 0% / 30%);
    --color-unread-counter-prominent: hsl(0deg 0% 100%);
    --color-unread-counter-normal: light-dark(
        hsl(0deg 0% 0% / 90%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-unread-counter-quiet: light-dark(
        hsl(240deg 15% 50%),
        hsl(240deg 15% 65%)
    );
    /* Legacy unread-counter color value. */
    --color-background-unread-counter: var(
        --color-background-unread-counter-prominent
    );
    --color-unread-counter-muted: hsl(240deg 10% 50% / 35%);
    --color-border-add-subscription-button-focus: light-dark(
        hsl(0deg 0% 20%),
        hsl(0deg 0% 67%)
    );
    /* When unreads are hovered on the condensed
       views, they should not have an alpha.
       The first color corresponds to
       --color-background-unread-counter-normal.
       The second color aligns with light mode's
       --color-background. */
    --color-background-unread-counter-no-alpha: light-dark(
        color-mix(in srgb, hsl(240deg 10% 50%) 20%, hsl(0deg 0% 94%)),
        color-mix(in srgb, hsl(240deg 10% 50%) 35%, hsl(0deg 0% 11%))
    );
    --color-background-unread-counter-dot: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-border-unread-counter: light-dark(
        var(--color-background-unread-counter),
        hsl(105deg 2% 50%)
    );
    --color-border-unread-counter-popover-menu: light-dark(
        inherit,
        var(--color-border-unread-counter)
    );
    --color-background-tab-picker-container: light-dark(
        hsl(0deg 0% 0% / 7%),
        hsl(0deg 0% 0% / 30%)
    );
    --color-background-tab-picker-selected-tab: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 100% / 7%)
    );
    --color-outline-tab-picker-tab-option: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 12%)
    );
    --color-background-tab-picker-tab-option-hover: light-dark(
        hsl(0deg 0% 100% / 60%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-background-tab-picker-tab-option-active: light-dark(
        hsl(0deg 0% 100% / 35%),
        hsl(0deg 0% 100% / 3%)
    );
    --color-background-popover: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 17%));
    --color-background-alert-word: light-dark(
        hsl(18deg 100% 84%),
        hsl(18deg 100% 75%)
    );
    --color-buddy-list-highlighted-user: var(
        --color-background-hover-narrow-filter
    );
    --color-buddy-list-avatar-loading: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 10%)
    );
    --color-border-sidebar: light-dark(hsl(0deg 0% 87%), hsl(0deg 0% 0% / 20%));
    --color-text-sidebar-base: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-border-sidebar-subheader: light-dark(
        hsl(0deg 0% 0% / 15%),
        hsl(0deg 0% 100% / 15%)
    );
    --color-request-progress-status-alert-text: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-background-tip: light-dark(
        hsl(46deg 63% 95%),
        hsl(46deg 28% 38% / 27%)
    );
    --color-border-tip: light-dark(hsl(49deg 20% 84%), hsl(49deg 38% 46%));
    --color-box-shadow-animated-purple-button-focus: light-dark(
        hsl(235deg 18% 7%),
        hsl(0deg 0% 100% / 66.6%)
    );
    --color-background-animated-button: light-dark(
        hsl(0deg 0% 90%),
        hsl(211deg 29% 14%)
    );
    --color-animated-button-text: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background-animated-button-hover: hsl(240deg 96% 68%);
    --color-invalid-input-border: light-dark(
        hsl(3deg 57% 33%),
        hsl(3deg 73% 74%)
    );
    --invalid-input-box-shadow: 0 0 2px var(--color-invalid-input-box-shadow);
    --color-invalid-input-box-shadow: light-dark(
        hsl(3deg 57% 33%),
        hsl(3deg 73% 74%)
    );
    --color-background-white-box: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-stream-group-row-checked-icon: hsl(240deg 96% 68%);
    --color-stream-group-row-checked-icon-hover: hsl(240deg 41% 50%);
    --color-stream-group-row-checked-icon-disabled: light-dark(
        hsl(240deg 96% 68% / 100%),
        hsl(240deg 96% 68% / 50%)
    );
    --color-stream-group-row-plus-icon: light-dark(
        hsl(0deg 0% 72%),
        hsl(218deg 14% 33%)
    );
    --color-stream-group-row-plus-icon-hover: light-dark(
        hsl(0deg 0% 27%),
        hsl(230deg 11% 67%)
    );
    --color-stream-group-row-plus-icon-disabled: light-dark(
        hsl(0deg 0% 87% / 100%),
        hsl(218deg 14% 33% / 50%)
    );

    /* Recent view */
    --recent-view-body-border-width: 1px;
    --recent-view-max-avatars: 4;
    --recent-view-participant-item-width: 1.5em; /* 24px at 16px / 1em */
    --recent-view-participant-item-padding-x: 0.0938em; /* 1.5px at 16px / 1em */
    --recent-view-participants-padding-x-start: 0.25em; /* 4px at 16px / 1em */
    --color-border-recent-view-table: var(
        --color-border-inbox-folder-component
    );
    --color-background-recent-view-row: var(--color-background-inbox-row);
    --color-background-recent-view-row-hover: var(
        --color-background-inbox-row-hover
    );
    --color-recent-view-link-unread: light-dark(
        hsl(0deg 0% 5%),
        hsl(0deg 0% 100% / 90%)
    );
    --color-recent-view-link: light-dark(
        hsl(0deg 0% 20%),
        hsl(0deg 0% 100% / 75%)
    );
    --color-background-recent-filters-button-focus: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-background-recent-filters-button-disabled: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-recent-filters-button-disabled: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0%)
    );
    --color-recent-view-participant-overflow-text: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background-recent-view-participant-overflow: light-dark(
        hsl(0deg 0% 88%),
        hsl(211deg 18% 25%)
    );
    --color-background-recent-view-table-thead-th: light-dark(
        hsl(0deg 0% 97%),
        hsl(0deg 0% 17%)
    );
    --color-background-recent-view-table-thead-sort-header: light-dark(
        hsl(229deg 9% 36% / 7%),
        hsl(230deg 9% 60% / 14%)
    );
    --color-text-recent-view-table-thead-th: light-dark(
        var(--grey-600),
        var(--grey-300)
    );
    --color-arrow-recent-view-table-thead-th: light-dark(
        hsl(229deg 9% 36% / 50%),
        hsl(229deg 10% 70% / 50%)
    );
    --color-text-recent-view-last-msg-time: light-dark(
        hsl(0deg 0% 15% / 75%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-text-recent-view-last-msg-time-unread: light-dark(
        hsl(0deg 0% 0% / 75%),
        hsl(0deg 0% 100% / 58%)
    );

    /* Compose box colors */
    --color-compose-box-background: light-dark(
        hsl(232deg 30% 92%),
        hsl(228deg 11% 17%)
    );
    --color-compose-message-content-background: light-dark(
        hsl(0deg 0% 100%),
        color-mix(
            in srgb,
            var(--color-compose-box-background),
            hsl(0deg 0% 0%) 20%
        )
    );
    --color-compose-message-content-background-over-limit: light-dark(
        hsl(3deg 35% 90%),
        hsl(3deg 50% 12%)
    );
    --color-compose-message-content-background-approaching-limit: light-dark(
        hsl(50deg 75% 92%),
        hsl(50deg 75% 12%)
    );
    --color-border-compose-content: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-compose-send-button-icon-color: hsl(0deg 0% 100%);
    --color-compose-send-button-background: hsl(240deg 96% 68%);
    --color-compose-send-button-background-interactive: hsl(240deg 41% 50%);
    --color-compose-send-button-focus-border: hsl(232deg 20% 10%);
    --color-compose-send-button-focus-shadow: light-dark(
        hsl(230deg 100% 20%),
        hsl(0deg 0% 100% / 80%)
    );
    --color-compose-send-control-button: light-dark(
        hsl(240deg 30% 50% / 95%),
        hsl(240deg 30% 70%)
    );
    --color-compose-send-control-button-background: transparent;
    --color-compose-send-control-button-interactive: light-dark(
        hsl(240deg 30% 50%),
        var(--color-compose-send-control-button)
    );
    --color-compose-send-control-button-background-interactive: light-dark(
        hsl(240deg 100% 30% / 5%),
        hsl(235deg 100% 70% / 11%)
    );
    --color-compose-send-control-button-focus-shadow: var(
        --color-compose-send-button-focus-shadow
    );
    --color-compose-recipient-box-text-color: inherit;
    --color-compose-recipient-box-background-color: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    /* Because of how the background color is assigned on
       recipient-row elements, we need here to mix down the
       border color from the compose text area,
       --color-message-content-container-border,
       with the compose box's background color,
       --color-compose-box-background. */
    --color-compose-recipient-box-border-color: light-dark(
        color-mix(in srgb, hsl(0deg 0% 0%) 10%, hsl(232deg 20% 92%)),
        hsl(0deg 0% 0% / 80%)
    );
    --color-compose-recipient-box-hover: light-dark(
        hsl(0deg 0% 69%),
        hsl(0deg 0% 100% / 12%)
    );
    --color-compose-recipient-box-has-focus: light-dark(
        hsl(0deg 0% 57%),
        hsl(0deg 0% 100% / 27%)
    );
    --color-compose-collapsed-reply-button-area-background: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-compose-collapsed-reply-button-area-background-interactive: light-dark(
        var(--color-compose-collapsed-reply-button-area-background),
        hsl(0deg 0% 0% / 15%)
    );
    --color-compose-collapsed-reply-button-area-border: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-compose-collapsed-reply-button-area-border-interactive: light-dark(
        hsl(0deg 0% 60%),
        var(--color-compose-collapsed-reply-button-area-border)
    );
    --color-compose-embedded-button-text-color: light-dark(
        hsl(231deg 20% 46%),
        hsl(231deg 30% 65%)
    );
    --color-compose-embedded-button-text-color-hover: light-dark(
        hsl(231deg 20% 30%),
        hsl(231deg 30% 70%)
    );
    --color-compose-embedded-button-background: transparent;
    --color-compose-embedded-button-background-hover: light-dark(
        hsl(231deg 100% 90% / 50%),
        hsl(235deg 100% 70% / 11%)
    );
    --color-compose-embedded-button-background-interactive: light-dark(
        hsl(231deg 100% 90% / 90%),
        hsl(235deg 100% 70% / 20%)
    );
    --color-background-compose-new-message-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-compose-new-message-button-hover: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 15%)
    );
    --color-background-compose-new-message-button-active: light-dark(
        hsl(0deg 0% 95%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-compose-new-message-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-compose-new-message-button-hover: light-dark(
        hsl(0deg 0% 60%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-compose-new-message-button-active: light-dark(
        hsl(0deg 0% 60%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-compose-chevron-arrow: hsl(0deg 0% 58%);
    --color-limit-indicator: light-dark(
        hsl(38deg 100% 36%),
        hsl(38deg 100% 70%)
    );
    --color-limit-indicator-over-limit: light-dark(
        hsl(3deg 80% 40%),
        hsl(3deg 80% 60%)
    );
    --color-narrow-to-compose-recipients-background: light-dark(
        hsl(227deg 100% 70% / 25%),
        hsl(227deg 80% 60% / 25%)
    );
    --color-narrow-to-compose-recipients-background-hover: light-dark(
        hsl(227deg 100% 70% / 35%),
        hsl(227deg 80% 60% / 35%)
    );
    --color-narrow-to-compose-recipients: light-dark(
        hsl(227deg 76% 64%),
        hsl(224deg 28% 81%)
    );
    --color-narrow-to-compose-recipients-hover: light-dark(
        hsl(227deg 78% 59%),
        hsl(221deg 100% 95%)
    );
    --color-composebox-button: light-dark(
        hsl(0deg 100% 0% / 55%),
        hsl(0deg 100% 100% / 55%)
    );
    --color-composebox-button-hover: var(--color-text-default);
    --color-composebox-button-background: light-dark(
        hsl(0deg 100% 100% / 60%),
        hsl(231deg 8% 13.5% / 80%)
    );
    --color-composebox-button-background-hover: light-dark(
        hsl(0deg 0% 95%),
        hsl(231deg 12% 18%)
    );
    --color-message-formatting-controls-container: light-dark(
        hsl(232deg 30% 96%),
        hsl(0deg 0% 0% / 8%)
    );
    --color-message-content-container-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 80%)
    );
    --color-message-content-container-border-focus: light-dark(
        hsl(0deg 0% 57%),
        hsl(0deg 0% 100% / 27%)
    );
    --color-message-content-container-border-over-limit: hsl(0deg 76% 65%);
    --color-message-content-container-border-approaching-limit: hsl(
        38deg 70% 50%
    );
    --color-compose-control-button-background-hover: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-compose-formatting-button-divider: light-dark(
        hsl(0deg 0% 75%),
        hsl(236deg 33% 90% / 25%)
    );
    --color-compose-focus-ring: light-dark(
        var(--color-outline-focus),
        hsl(0deg 0% 67%)
    );
    --color-compose-scroll-icon: hsl(0deg 0% 50%);
    --gradient-compose-scroll-backward: linear-gradient(
        90deg,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 35%,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
        transparent 100%
    );
    --gradient-compose-scroll-backward-hover: linear-gradient(
        90deg,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 35%,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
        transparent 100%
    );
    --gradient-compose-scroll-backward-active: linear-gradient(
        90deg,
        light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 45%,
        transparent 100%
    );
    --gradient-compose-scroll-forward: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 65%
    );
    --gradient-compose-scroll-forward-hover: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 65%
    );
    --gradient-compose-scroll-forward-active: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 55%
    );

    /* Text colors */
    --color-text-default: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 87%));
    /* Unlike the light theme, the dark theme renders message
       text in the default color. */
    --color-text-message-default: light-dark(
        hsl(0deg 0% 15%),
        var(--color-text-default)
    );
    --color-text-message-blockquote-border: light-dark(
        hsl(0deg 0% 15% / 25%),
        hsl(0deg 0% 87% / 40%)
    );
    --color-text-message-header-archived: hsl(0deg 0% 50%);
    --color-text-message-view-header: light-dark(
        hsl(0deg 0% 20% / 100%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-text-message-header: light-dark(
        hsl(0deg 0% 15%),
        hsl(0deg 0% 100% / 85%)
    );
    /* Light and dark mode both use the same hover color on
       sender names. */
    --color-text-sender-name-hover: hsl(200deg 100% 40%);
    --color-text-dropdown-input: light-dark(
        hsl(0deg 0% 13.33%),
        hsl(0deg 0% 95%)
    );
    --color-text-self-direct-mention: light-dark(
        hsl(240deg 52% 45% / 100%),
        hsl(240deg 100% 88% / 100%)
    );
    --color-text-self-group-mention: light-dark(
        hsl(183deg 52% 26% / 100%),
        hsl(184deg 52% 63% / 100%)
    );
    --color-text-show-more-less-button: light-dark(
        hsl(240deg 52% 53%),
        hsl(240deg 30% 65%)
    );
    --color-text-search: light-dark(hsl(0deg 0% 35%), hsl(0deg 0% 100% / 75%));
    --color-text-search-hover: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-text-placeholder: light-dark(hsl(0deg 0% 45%), hsl(0deg 0% 55%));
    --color-text-search-placeholder: light-dark(
        hsl(0deg 0% 50%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-text-popover-menu: light-dark(
        hsl(0deg 0% 15%),
        hsl(0deg 0% 100% / 80%)
    );
    --color-text-full-name: light-dark(hsl(0deg 0% 15%), hsl(0deg 0% 100%));
    --color-text-item: light-dark(hsl(0deg 0% 40%), hsl(0deg 0% 50%));
    --color-text-personal-menu-no-status: light-dark(
        hsl(0deg 0% 50%),
        hsl(0deg 0% 100% 35%)
    );
    --color-text-personal-menu-some-status: light-dark(
        hsl(0deg 0% 40%),
        hsl(0deg 0% 100% 50%)
    );
    --color-text-sidebar-heading: light-dark(
        hsl(216deg 65% 20%),
        hsl(216deg 50% 75%)
    );
    --color-text-sidebar-action-heading: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-text-sidebar-action-heading-hover: light-dark(
        hsl(240deg 100% 15%),
        hsl(240deg 100% 90%)
    );
    --color-text-sidebar-popover-menu: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-text-user-card-secondary: light-dark(
        var(--grey-550),
        var(--grey-400)
    );
    --color-text-url: hsl(200deg 100% 40%);
    --color-text-url-hover: light-dark(
        hsl(200deg 100% 25%),
        hsl(200deg 79% 66%)
    );
    --color-text-settings-field-hint: light-dark(
        hsl(0deg 0% 57%),
        hsl(0deg 0% 52%)
    );
    --color-text-clear-search-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(236deg 33% 80%)
    );
    --color-text-clear-search-button-hover: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-text-settings-plus-button: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background-settings-plus-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-settings-plus-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );

    /* User Profile Modal */
    --color-user-profile-field-name: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-border-user-profile-table: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-border-manage-profile-footer: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-border-user-profile-list-container: light-dark(
        hsl(0deg 0% 0% / 35%),
        hsl(0deg 0% 100% / 30%)
    );
    --background-color-user-profile-list-container: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 17%)
    );

    /* Link colors */
    --color-text-link: light-dark(hsl(210deg 94% 42%), hsl(200deg 100% 50%));
    --color-text-link-decoration: light-dark(
        color-mix(in oklch, hsl(210deg 94% 42%) 20%, transparent),
        color-mix(in oklch, hsl(200deg 100% 50%) 20%, transparent)
    );
    --color-text-link-hover: light-dark(
        hsl(212deg 100% 50%),
        hsl(200deg 100% 60%)
    );
    --color-text-link-decoration-hover: light-dark(
        color-mix(in oklch, hsl(212deg 100% 50%) 70%, transparent),
        color-mix(in oklch, hsl(200deg 100% 60%) 70%, transparent)
    );
    --color-text-link-active: light-dark(
        hsl(212deg 100% 30%),
        hsl(200deg 100% 50%)
    );
    /* These colors are from Bootstrap. */
    --color-text-generic-link: #08c;
    --color-text-generic-link-interactive: light-dark(
        #005580,
        hsl(200deg 79% 66%)
    );

    /* Tippy colors */
    --color-background-tippy-box: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 0%));

    /* Widgets colors */
    --color-background-dropdown-widget: light-dark(
        hsl(240deg 20% 98%),
        hsl(240deg 5% 16%)
    );
    --color-border-dropdown-widget: light-dark(
        hsl(0deg 0% 0% / 40%),
        hsl(0deg 0% 0%)
    );
    --color-border-dropdown-widget-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-background-dropdown-widget-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-disabled-dropdown-widget-button: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    /* Poll Widget */
    --color-poll-vote: light-dark(hsl(156deg 41% 40%), hsl(185deg 35% 65%));
    --color-poll-vote-hover: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 50% 70%)
    );
    --color-poll-vote-focus: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 50% 65%)
    );
    --color-border-poll-vote: light-dark(
        hsl(156deg 28% 70%),
        hsl(185deg 35% 35%)
    );
    --color-border-poll-vote-hover: light-dark(
        hsl(156deg 30% 50%),
        hsl(185deg 40% 40%)
    );
    --color-border-poll-vote-focus: light-dark(
        hsl(156deg 30% 50%),
        hsl(185deg 40% 50%)
    );
    --color-background-poll-vote-hover: light-dark(
        var(--color-background-widget-button),
        hsl(185deg 20% 20%)
    );
    --color-background-poll-vote-focus: light-dark(
        hsl(156deg 41% 90%),
        hsl(185deg 40% 35%)
    );
    --color-poll-names: light-dark(hsl(0deg 0% 45%), hsl(236deg 15% 70%));
    /* TODO Widget */
    --color-border-todo-checkbox: light-dark(
        hsl(156deg 28% 70%),
        color-mix(in oklch, hsl(185deg 40% 45%) 70%, transparent)
    );
    --color-border-todo-checkbox-hover: light-dark(
        hsl(156deg 30% 50%),
        hsl(185deg 40% 35%)
    );
    --color-border-todo-checkbox-checked: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 40% 45%)
    );
    --color-background-todo-checkbox-hover: light-dark(
        transparent,
        hsl(185deg 20% 20%)
    );
    --color-background-todo-checkbox-checked: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 40% 45%)
    );

    /* KBD colors */
    --color-kbd-background: light-dark(hsl(0deg 0% 98%), hsl(211deg 29% 14%));
    --color-kbd-border: light-dark(hsl(0deg 0% 80%), hsl(211deg 29% 14%));
    --color-kbd-text: light-dark(hsl(0deg 0% 20%), hsl(236deg 33% 90%));
    --color-kbd-enter-sends: light-dark(hsl(0deg 0% 40%), hsl(236deg 33% 90%));

    /* Settings */
    --color-realm-enable-spectator-access-link: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-background-stream-email: light-dark(
        hsl(0deg 0% 98%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-integration-url: light-dark(
        transparent,
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-tbody-th-odd: light-dark(
        transparent,
        hsl(0deg 0% 0% / 20%)
    );
    /* Markdown colors */
    --color-background-rendered-markdown-thead: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-rendered-markdown-table: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 33%)
    );

    /* Tab-switcher colors */
    /* The non-selected colors here are shared with numerous other
       inputs and buttons in dark theme. A refactor here would make
       more generic names for those colors, and help to clean out
       the huge stack of selectors in the dark theme CSS file. */
    --color-background-tab-switcher-ind-tab: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-tab-switcher-ind-tab-selected: light-dark(
        hsl(0deg 0% 53%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-tab-switcher-ind-tab: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-tab-switcher-ind-tab-selected: light-dark(
        hsl(0deg 0% 47%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-text-tab-switcher-ind-tab-disabled: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 42% / 90%)
    );
    --color-border-tab-switcher-ind-tab-disabled: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 60%)
    );

    /* Settings table colors */
    --color-background-table-header: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0%)
    );
    --color-background-table-header-sortable-hover: light-dark(
        hsl(0deg 0% 95%),
        hsl(211deg 29% 14%)
    );
    --color-border-table-striped: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-table-bordered: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-table-subscriber-list: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );

    /* Markdown code colors */
    --color-markdown-code-text: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-markdown-code-background: light-dark(
        hsl(0deg 0% 0% / 6%),
        hsl(0deg 0% 100% / 8%)
    );
    --color-markdown-code-background-mentions: light-dark(
        hsl(0deg 0% 0% / 7%),
        var(--color-markdown-code-background)
    );
    --color-markdown-pre-text: var(--color-markdown-code-text);
    --color-markdown-pre-border: transparent;
    --color-markdown-pre-background: light-dark(
        hsl(0deg 0% 0% / 4%),
        hsl(0deg 0% 100% / 4%)
    );
    --color-markdown-pre-background-mentions: light-dark(
        hsl(0deg 0% 0% / 4%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-markdown-pre-border-mentions: light-dark(
        transparent,
        var(--color-markdown-pre-border)
    );
    --color-background-search-highlight: light-dark(
        hsl(51deg 100% 79%),
        hsl(51deg 100% 72%)
    );
    --color-text-search-highlight: light-dark(currentcolor, hsl(0deg 0% 0%));
    --color-text-alert-word: light-dark(currentcolor, hsl(0deg 0% 0%));
    --color-markdown-link: light-dark(
        hsl(200deg 100% 40%),
        var(--color-text-generic-link)
    );
    --color-markdown-code-link: var(--color-markdown-link);
    --color-markdown-link-hover: light-dark(
        hsl(200deg 100% 25%),
        var(--color-text-generic-link-interactive)
    );
    --color-markdown-code-link-hover: var(--color-markdown-link-hover);
    --color-markdown-link-highlight: light-dark(
        hsl(200deg 100% 40%),
        hsl(210deg 100% 25%)
    );
    --color-markdown-link-highlight-hover: light-dark(
        hsl(200deg 100% 25%),
        hsl(210deg 100% 18%)
    );
    --color-markdown-link-alert-word: light-dark(
        hsl(200deg 100% 40%),
        hsl(210deg 100% 25%)
    );
    --color-markdown-link-alert-word-hover: light-dark(
        hsl(200deg 100% 25%),
        hsl(210deg 100% 18%)
    );
    --color-background-image-thumbnail: light-dark(
        hsl(0deg 0% 0% / 3%),
        hsl(0deg 0% 100% / 3%)
    );
    --color-background-image-thumbnail-hover: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 35%)
    );

    /* Icon colors */
    --color-icon-bot: light-dark(
        hsl(180deg 8% 65% / 100%),
        hsl(180deg 5% 50% / 100%)
    );
    --color-message-action-visible: light-dark(
        hsl(216deg 43% 20% / 50%),
        hsl(217deg 41% 90% / 50%)
    );
    --color-message-action-interactive: light-dark(
        hsl(216deg 43% 20% / 100%),
        hsl(217deg 41% 90% / 100%)
    );
    --color-message-star-action: hsl(41deg 100% 47% / 100%);
    --color-left-sidebar-follow-icon-hover: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    /* The gray on the filter icons is the same as
       what's set on ul.filters, but with 70% opacity. */
    --color-left-sidebar-navigation-icon: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-left-sidebar-dm-partners-icon: light-dark(
        hsl(240deg 30% 60%),
        hsl(240deg 35% 58%)
    );
    --color-vdots-hint: light-dark(hsl(240deg 30% 80%), hsl(240deg 35% 38%));
    --color-vdots-visible: light-dark(hsl(240deg 30% 40%), hsl(240deg 35% 68%));
    --color-vdots-hover: light-dark(hsl(240deg 100% 15%), hsl(240deg 100% 90%));
    --color-tab-picker-icon: light-dark(hsl(200deg 100% 40%), hsl(0deg 0% 80%));
    --color-user-circle-active: light-dark(#43a35e, #4cdc75);
    --color-user-circle-idle: light-dark(#f5b266, #ae640a);
    --color-user-circle-offline: light-dark(#bcc0cf, #545764);
    --color-user-circle-offline-typeahead-highlight: light-dark(
        #adb2c5,
        #646671
    );
    --color-user-circle-deactivated: hsl(0deg 0% 50%);
    /* The gradient is also recreated inside the `user-circle-idle` SVG
       file. That is needed for the new help center since it does not
       do the SVG to font conversion that the web app does. We
       re-apply it here since the linearGradient there is stripped off
       when that SVG is converted to font for the web app. Any changes
       to this gradient should be reflected in the SVG file as well. */
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        light-dark(
                color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ),
                var(--color-user-circle-idle)
            )
            25%,
        transparent 100%
    );
    /* To avoid the avatar bleeding through, we rewrite
       the gradient with an explicit background color. */
    --gradient-user-circle-idle-avatar: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        light-dark(
                color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    var(--color-background)
                ),
                var(--color-user-circle-idle)
            )
            25%,
        var(--color-background) 100%
    );
    --color-copy-button: light-dark(
        /* hsl(229deg 9% 36%) corresponds to --grey-600.
           We use the hsl() equivalent directly since postcss-color-mix-function
           cannot dynamically resolve var() arguments. */
        color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent),
        /* hsl(229deg 10% 70%) corresponds to --grey-400. */
        color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent)
    );
    --color-copy-button-hover: light-dark(var(--grey-600), var(--grey-300));
    --color-copy-button-square-bg-hover: light-dark(
        /* --grey-600, opacity 0.07 */
        color-mix(in oklch, hsl(229deg 9% 36%) 7%, transparent),
        /* --grey-400, opacity 0.14 */
        color-mix(in oklch, hsl(230deg 9% 60%) 14%, transparent)
    );
    --color-copy-button-active: light-dark(
        /* --grey-600, opacity 0.7 */
        color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent),
        /* --grey-300, opacity 0.7 */
        color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent)
    );
    --color-copy-button-square-active: light-dark(
        var(--grey-600),
        var(--grey-300)
    );
    --color-copy-button-square-bg-active: light-dark(
        /* --grey-600, opacity 0.11 */
        color-mix(in oklch, hsl(229deg 9% 36%) 11%, transparent),
        /* --grey-400, opacity 0.18 */
        color-mix(in oklch, hsl(229deg 9% 60%) 18%, transparent)
    );
    --color-copy-button-success: light-dark(var(--green-500), var(--green-300));

    /* Reaction container colors */
    --color-message-reaction-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 15%)
    );
    --color-message-reaction-border-reacted: light-dark(
        hsl(0deg 0% 0% / 45%),
        hsl(0deg 0% 100% / 70%)
    );
    --color-message-reaction-background: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 30%)
    );
    --color-message-reaction-background-reacted: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 80%)
    );
    --color-message-reaction-background-hover: light-dark(
        hsl(210deg 30% 96%),
        hsl(0deg 0% 100% / 10%)
    );
    --color-message-reaction-shadow-inner: light-dark(
        hsl(210deg 50% 50% / 8%),
        transparent /* No shadow in dark mode. */
    );
    --color-message-reaction-text: light-dark(
        hsl(210deg 20% 25% / 100%),
        hsl(0deg 0% 100% / 75%)
    );
    --color-message-reaction-text-reacted: light-dark(
        hsl(210deg 20% 20% / 100%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-message-reaction-button-text: light-dark(
        hsl(210deg 20% 20% / 60%),
        var(--color-message-reaction-text)
    );
    --color-message-reaction-button-text-hover: light-dark(
        var(--color-message-reaction-text),
        var(--color-message-reaction-text-reacted)
    );
    --color-message-reaction-button-background: inherit;
    --color-message-reaction-button-background-hover: light-dark(
        var(--color-message-reaction-background),
        var(--color-message-reaction-background-hover)
    );
    --color-message-reaction-button-border: transparent;
    --color-message-reaction-button-border-hover: var(
        --color-message-reaction-border
    );
    --font-weight-message-reaction: 600;

    /* Message feed loading indicator colors */
    --color-zulip-logo: light-dark(
        hsl(0deg 0% 0% / 34%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-zulip-logo-loading: light-dark(hsl(0deg 0% 27%), hsl(0deg 0% 100%));
    --color-recent-view-loading-spinner: light-dark(
        hsl(0deg 0% 27%),
        hsl(0deg 0% 100% / 60%)
    );
    --color-zulip-logo-z: light-dark(hsl(0deg 0% 100%), hsl(214deg 27% 18%));

    /* Message collapsing/condensing button colors */
    --color-show-more-less-button-background: light-dark(
        hsl(240deg 44% 56% / 8%),
        hsl(240deg 44% 56% / 15%)
    );
    --color-show-more-less-button-background-hover: light-dark(
        hsl(240deg 44% 56% / 15%),
        hsl(240deg 44% 56% / 25%)
    );
    --color-show-more-less-button-background-active: light-dark(
        hsl(240deg 44% 56% / 20%),
        hsl(240deg 44% 56% / 15%)
    );

    /* Message edit history colors */
    --color-message-edit-history-text-inserted: light-dark(
        hsl(122deg 72% 30%),
        hsl(122deg 100% 81%)
    );
    --color-message-edit-history-background-inserted: light-dark(
        hsl(120deg 64% 95%),
        hsl(120deg 64% 95% / 30%)
    );
    --color-message-edit-history-text-deleted: light-dark(
        hsl(0deg 100% 50%),
        hsl(0deg 90% 67%)
    );
    --color-message-edit-history-background-deleted: light-dark(
        hsl(7deg 90% 92%),
        hsl(7deg 54% 62% / 38%)
    );

    /* Mention pill colors */
    --color-background-direct-mention: light-dark(
        hsl(240deg 52% 95%),
        hsl(240deg 13% 16%)
    );
    --color-background-group-mention: light-dark(
        hsl(180deg 40% 94%),
        hsl(180deg 13% 14%)
    );
    --color-background-text-direct-mention: light-dark(
        hsl(240deg 70% 70% / 20%),
        hsl(240deg 52% 60% / 25%)
    );
    --color-background-text-hover-direct-mention: light-dark(
        hsl(240deg 70% 70% / 30%),
        hsl(240deg 52% 60% / 45%)
    );
    --color-background-text-group-mention: light-dark(
        hsl(183deg 60% 45% / 18%),
        hsl(183deg 52% 40% / 20%)
    );
    --color-background-text-hover-group-mention: light-dark(
        hsl(183deg 60% 45% / 30%),
        hsl(183deg 52% 40% / 30%)
    );

    /* Input pills */
    --color-background-input-pill: light-dark(
        hsl(237deg 68% 94%),
        hsl(240deg 65% 60% / 38%)
    );
    /* Tuned pill for the search bar in dark mode. */
    --color-background-input-pill-search: light-dark(
        hsl(237deg 68% 94%),
        hsl(240deg 65% 60% / 30%)
    );
    --color-background-input-pill-hover: light-dark(
        hsl(240deg 70% 70% / 30%),
        hsl(240deg 52% 60% / 45%)
    );
    --color-border-input-pill-image: light-dark(
        hsl(237deg 68% 94% / 50%),
        hsl(240deg 65% 60% / 60%)
    );
    --color-outline-low-attention-input-pill: light-dark(
        hsl(237deg 68% 88%),
        hsl(240deg 65% 60% / 22%)
    );
    --color-focus-outline-input-pill: light-dark(
        hsl(240deg 50% 50%),
        hsl(0deg 0% 100% / 60%)
    );
    --color-input-pill-close: light-dark(
        hsl(240deg 60% 65%),
        hsl(240deg 50% 74%)
    );
    --color-background-input-pill-exit-hover: light-dark(
        hsl(240deg 70% 70% / 15%),
        hsl(0deg 0% 100% / 7%)
    );
    --color-background-deactivated-user-pill: light-dark(
        hsl(8deg 96% 91%),
        hsl(360deg 97% 25%)
    );
    --color-focus-outline-deactivated-user-pill: light-dark(
        hsl(4deg 75% 53%),
        hsl(0deg 0% 100% / 70%)
    );
    --color-close-deactivated-user-pill: light-dark(
        hsl(4deg 75% 53%),
        hsl(7deg 100% 74%)
    );
    --color-background-exit-hover-deactivated-user-pill: light-dark(
        hsl(4deg 75% 53% / 15%),
        hsl(0deg 0% 100% / 7%)
    );
    --color-background-user-pill: light-dark(
        hsl(0deg 0% 100% / 85%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-background-pill-container: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-pill-container-input-disabled: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-pill-container: light-dark(
        hsl(0deg 0% 0% / 15%),
        hsl(0deg 0% 0% / 60%)
    );

    /* Inbox view constants - Values from Figma design */
    --inbox-view-folder-component-border-width: 0.5px;
    --width-inbox-search: calc(27.4375em); /* 439px / 16px em */
    --width-inbox-filters-dropdown: 10.7142em; /* 150px / 14px em */
    --color-background-inbox-no-unreads-illustration: light-dark(
        hsl(147deg 57% 25%),
        hsl(147deg 40% 55%)
    );
    --color-background-inbox: var(--color-background);
    --color-border-inbox-folder-component: hsl(0deg 0% 0% / 13%);
    --color-icon-search-inbox: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-inbox-search-text: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 95%));
    --color-border-inbox-search: light-dark(
        hsl(229.09deg 21.57% 10% / 30%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-border-inbox-search-hover: light-dark(
        hsl(229.09deg 21.57% 10% / 60%),
        hsl(0deg 0% 100% / 40%)
    );
    --color-background-inbox-search: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 10%)
    );
    --color-background-inbox-search-hover: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 8%)
    );
    --color-background-inbox-search-focus: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 7%)
    );
    --color-border-inbox-search-focus: light-dark(
        hsl(229.09deg 21.57% 10% / 80%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-box-shadow-inbox-search-focus: light-dark(
        hsl(228deg 9.8% 20% / 30%),
        hsl(0deg 0% 100% / 40%)
    );
    --color-background-inbox-row: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 14%)
    );
    --color-background-inbox-row-hover: light-dark(
        color-mix(in srgb, hsl(0deg 0% 0%) 5%, hsl(0deg 0% 100%)),
        color-mix(in srgb, hsl(0deg 0% 100%) 5%, hsl(0deg 0% 14%))
    );
    --color-background-button-inbox-selected: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-background-button-inbox-focus: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 20%)
    );
    --color-icons-inbox: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-folder-header: light-dark(hsl(216deg 43% 20%), hsl(216deg 50% 75%));
    /* Light mode uses the --grey-600 equivalent;
       dark mode uses the --grey-300 equivalent. */
    --color-inbox-row-chevron: light-dark(#535663, #aaadba);

    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.11px 0 hsl(0deg 0% 0% / 6%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 7%),
        0 8.438px 13.9271px 0 hsl(0deg 0% 0% / 8%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 9%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 9%),
        0 41px 80px 0 hsl(0deg 0% 0% / 13%);
    --box-shadow-gear-menu:
        0 2.7798px 4.1129px 0 hsl(0deg 0% 0% / 10%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
        0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
        0 41px 80px 0 hsl(0deg 0% 0% / 20%);
    --color-navbar-icon: light-dark(hsl(240deg 20% 50%), hsl(240deg 35% 60%));
    --color-navbar-spectator-low-attention-brand-button-text: light-dark(
        hsl(240deg 40% 50%),
        hsl(240deg 55% 72% / 100%)
    );
    --color-navbar-spectator-low-attention-brand-button-background: transparent;
    --color-navbar-spectator-low-attention-brand-button-background-hover: light-dark(
        hsl(240deg 100% 30% / 5%),
        hsl(240deg 56% 70% / 10%)
    );
    --color-navbar-spectator-low-attention-brand-button-background-active: light-dark(
        hsl(240deg 100% 30% / 8%),
        hsl(240deg 56% 70% / 13%)
    );
    --color-navbar-spectator-medium-attention-brand-button-text: light-dark(
        hsl(240deg 40% 40% / 100%),
        hsl(240deg 64% 76% / 100%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background: light-dark(
        hsl(244deg 64% 47% / 10%),
        hsl(240deg 56% 70% / 12%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background-hover: light-dark(
        hsl(244deg 64% 47% / 15%),
        hsl(240deg 56% 70% / 17%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background-active: light-dark(
        hsl(244deg 64% 47% / 18%),
        hsl(240deg 56% 70% / 12%)
    );
    --color-gear-menu-lighter-text: light-dark(
        hsl(0deg 0% 40%),
        hsl(0deg 0% 50%)
    );
    --color-gear-menu-blue-text: light-dark(
        hsl(217deg 100% 50%),
        hsl(217deg 100% 65%)
    );
    --color-header-button-hover: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 100% / 4%)
    );
    /* This is a technique for directing CSS to do
       the color mixing ordinarily handled by the
       alpha channel in hsl(); here, the alpha value
       is omitted from the hsl() syntax and instead
       used as the percentage for mixing over top of
       the navbar background. This is needed so that
       elements like the unread-count dot can make
       use of the color, but neither compound alpha
       values or apply alpha values over different
       colors, such as the background color on the
       unread dot.

       The second color value aligns with
       --color-background-navbar. We use the value
       directly so that this gets compiled down to
       an rgb() value by PostCSS Preset Env. */
    --color-header-button-hover-no-alpha: light-dark(
        color-mix(in srgb, hsl(0deg 0% 0%) 5%, hsl(0deg 0% 97%)),
        color-mix(in srgb, hsl(0deg 0% 100%) 4%, hsl(0deg 0% 13%))
    );
    --color-header-button-focus: light-dark(
        hsl(0deg 0% 0% / 8%),
        hsl(0deg 0% 100% / 7%)
    );
    /* The second color value aligns with
       --color-background-navbar */
    --color-header-button-focus-no-alpha: light-dark(
        color-mix(in srgb, hsl(0deg 0% 0%) 8%, hsl(0deg 0% 97%)),
        color-mix(in srgb, hsl(0deg 0% 100%) 7%, hsl(0deg 0% 13%))
    );
    --color-fill-hover-copy-icon: hsl(200deg 100% 40%);
    --color-fill-user-invite-copy-icon: light-dark(
        hsl(0deg 0% 46.7%),
        hsl(236deg 33% 90%)
    );
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23333333' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z'/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    /* Don't define light theme colors for modal here
       since the modal is also used on billing pages and
       this file is not imported on billing pages. */

    /* Zulip-style button colors. */
    --color-background-zulip-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-zulip-button-hover: light-dark(
        var(--color-background-zulip-button),
        hsl(0deg 0% 0% / 15%)
    );
    --color-background-zulip-button-active: light-dark(
        hsl(0deg 0% 95%),
        var(--color-background-zulip-button-hover)
    );
    --color-background-zulip-button-disabled: light-dark(
        hsl(0deg 0% 93%),
        var(--color-background-zulip-button)
    );
    --color-border-zulip-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-zulip-button-interactive: light-dark(
        hsl(0deg 0% 60%),
        var(--color-border-zulip-button)
    );

    /* Zulip-style checkbox values. */
    --color-border-rendered-checkbox: light-dark(
        hsl(0deg 0% 0% / 60%),
        hsl(0deg 0% 100% / 40%)
    );
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url("../images/checkbox.svg");
    /* Nested checkboxes in settings menu */
    --settings-nested-checkbox-vertical-margins: 0.3125em 0; /* 5px at 16px */

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url("../images/loading/loader-black.svg");

    /* Zulip resizer handle svg */
    --svg-resize-handle: url("../images/resize-handle-black.svg");

    /* Emoji-picker colors */
    --color-background-emoji-picker-popover: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-emoji-picker-popover-tab-item-active: light-dark(
        hsl(0deg 0% 100% / 20%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-background-emoji-picker-emoji-focus: light-dark(
        hsl(0deg 0% 93%),
        hsl(212deg 28% 8% / 75%)
    );
    --color-box-shadow-emoji-picker-emoji-focus: light-dark(
        transparent,
        hsl(0deg 0% 98%)
    );
    --color-background-emoji-picker-emoji-reacted: light-dark(
        hsl(195deg 50% 95%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-emoji-picker-emoji-reacted: light-dark(
        hsl(195deg 52% 79%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-background-emoji-picker-emoji-reacted-focus: light-dark(
        hsl(195deg 55% 88%),
        hsl(0deg 0% 20% / 70%)
    );
    /* Same color as background color of header / footer */
    --color-border-emoji-picker-tippy-arrow: light-dark(
        hsl(0deg 0% 93%),
        hsl(211.58deg 33.33% 11.18%)
    );

    /* Dropdown / Typeahead constants */
    --color-dropdown-item: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 75%));
    --color-dropdown-item-link-underline: light-dark(
        hsl(0deg 0% 20% 60%),
        hsl(0deg 0% 75% 60%)
    );
    --color-active-dropdown-item: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 90%));
    --background-color-active-dropdown-item: light-dark(
        hsl(220deg 12% 4.9% / 5%),
        hsl(220deg 12% 100% / 7%)
    );
    --background-color-current-selection-dropdown-item: color-mix(
        in srgb,
        var(--color-active-dropdown-item) 2%,
        transparent
    );
    --background-color-current-setting-dropdown-item: color-mix(
        in srgb,
        var(--purple-500) 13%,
        transparent
    );
    --color-current-setting-dropdown-item: light-dark(
        var(--purple-700),
        var(--purple-300)
    );
    --background-color-active-typeahead-item: light-dark(
        hsl(220deg 12% 4.9% / 5%),
        hsl(220deg 12% 100% / 7%)
    );
    --color-typeahead-option-label: light-dark(
        var(--grey-500),
        var(--grey-400)
    );

    /* Shared button CSS variables */
    --color-outline-button-focus: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --outline-width-button-focus: 1.5px;
    --outline-offset-button-focus: 0;
    /* Actions buttons */
    --color-inner-shadow-action-button: light-dark(
        color-mix(in oklch, hsl(0deg 0% 0%) 20%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 21%, transparent)
    );
    /* Action buttons -- Neutral Variant */
    --color-text-neutral-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
    --color-background-neutral-solid-action-button: light-dark(
        hsl(229deg 7% 50%),
        hsl(229deg 9% 36%)
    );
    --color-background-neutral-solid-action-button-hover: light-dark(
        hsl(229deg 7% 47%),
        hsl(229deg 8% 42%)
    );
    --color-background-neutral-solid-action-button-active: light-dark(
        hsl(232deg 7% 44%),
        hsl(229deg 9% 36%)
    );
    --color-text-neutral-subtle-action-button: light-dark(
        hsl(229deg 12% 25%),
        hsl(231deg 11% 76%)
    );
    --color-background-neutral-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(230deg 7% 50%) 12%, transparent),
        color-mix(in oklch, hsl(231deg 11% 76%) 12%, transparent)
    );
    --color-background-neutral-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(230deg 7% 50%) 17%, transparent),
        color-mix(in oklch, hsl(231deg 11% 76%) 17%, transparent)
    );
    --color-background-neutral-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(230deg 7% 50%) 22%, transparent),
        color-mix(in oklch, hsl(231deg 11% 76%) 12%, transparent)
    );
    --color-text-neutral-text-action-button: light-dark(
        hsl(229deg 9% 36%),
        hsl(229deg 10% 70%)
    );
    --color-background-neutral-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 7%, transparent),
        color-mix(in oklch, hsl(230deg 9% 60%) 14%, transparent)
    );
    --color-background-neutral-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 11%, transparent),
        color-mix(in oklch, hsl(230deg 9% 60%) 18%, transparent)
    );
    /* Action buttons -- Brand Variant */
    --color-text-brand-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
    --color-background-brand-solid-action-button: light-dark(
        hsl(254deg 99% 68%),
        hsl(261deg 79% 43%)
    );
    --color-background-brand-solid-action-button-hover: light-dark(
        hsl(255deg 81% 61%),
        hsl(258deg 66% 51%)
    );
    --color-background-brand-solid-action-button-active: light-dark(
        hsl(258deg 66% 51%),
        hsl(261deg 79% 43%)
    );
    --color-text-brand-subtle-action-button: light-dark(
        hsl(264deg 95% 34%),
        hsl(244deg 96% 82%)
    );
    --color-background-brand-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(254deg 99% 68%) 12%, transparent),
        color-mix(in oklch, hsl(246deg 96% 79%) 12%, transparent)
    );
    --color-background-brand-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(254deg 99% 68%) 17%, transparent),
        color-mix(in oklch, hsl(246deg 96% 79%) 17%, transparent)
    );
    --color-background-brand-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(254deg 99% 68%) 22%, transparent),
        color-mix(in oklch, hsl(246deg 96% 79%) 12%, transparent)
    );
    --color-text-brand-text-action-button: light-dark(
        hsl(255deg 54% 50%),
        hsl(246deg 96% 79%)
    );
    --color-background-brand-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(264deg 100% 22%) 5%, transparent),
        color-mix(in oklch, hsl(251deg 100% 72%) 14%, transparent)
    );
    --color-background-brand-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(264deg 100% 22%) 10%, transparent),
        color-mix(in oklch, hsl(251deg 100% 72%) 18%, transparent)
    );
    /* Action buttons -- Info Variant */
    --color-text-info-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
    --color-background-info-solid-action-button: light-dark(
        hsl(226deg 100% 62%),
        hsl(228deg 75% 47%)
    );
    --color-background-info-solid-action-button-hover: hsl(226deg 83% 55%);
    --color-background-info-solid-action-button-active: hsl(228deg 75% 47%);
    --color-text-info-subtle-action-button: light-dark(
        hsl(231deg 82% 36%),
        hsl(222deg 98% 79%)
    );
    --color-background-info-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(226deg 100% 62%) 12%, transparent),
        color-mix(in oklch, hsl(222deg 98% 79%) 12%, transparent)
    );
    --color-background-info-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(226deg 100% 62%) 17%, transparent),
        color-mix(in oklch, hsl(222deg 98% 79%) 17%, transparent)
    );
    --color-background-info-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(226deg 100% 62%) 22%, transparent),
        color-mix(in oklch, hsl(222deg 98% 79%) 12%, transparent)
    );
    --color-text-info-text-action-button: light-dark(
        hsl(227deg 70% 46%),
        hsl(222deg 97% 75%)
    );
    --color-background-info-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(241deg 95% 25%) 5%, transparent),
        color-mix(in oklch, hsl(224deg 98% 65%) 12%, transparent)
    );
    --color-background-info-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(241deg 95% 25%) 9%, transparent),
        color-mix(in oklch, hsl(224deg 98% 65%) 17%, transparent)
    );
    /* Action buttons -- Success Variant */
    --color-text-success-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
    --color-background-success-solid-action-button: light-dark(
        hsl(146deg 90% 27%),
        hsl(144deg 84% 22%)
    );
    --color-background-success-solid-action-button-hover: hsl(145deg 87% 25%);
    --color-background-success-solid-action-button-active: hsl(144deg 84% 22%);
    --color-text-success-subtle-action-button: light-dark(
        hsl(144deg 88% 16%),
        hsl(135deg 56% 63%)
    );
    --color-background-success-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 13%, transparent),
        color-mix(in oklch, hsl(138deg 46% 47%) 12%, transparent)
    );
    --color-background-success-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 18%, transparent),
        color-mix(in oklch, hsl(138deg 46% 47%) 17%, transparent)
    );
    --color-background-success-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 23%, transparent),
        color-mix(in oklch, hsl(138deg 46% 47%) 12%, transparent)
    );
    --color-text-success-text-action-button: light-dark(
        hsl(146deg 90% 27%),
        hsl(136deg 47% 55%)
    );
    --color-background-success-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(144deg 84% 22%) 8%, transparent),
        color-mix(in oklch, hsl(139deg 54% 40%) 12%, transparent)
    );
    --color-background-success-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(144deg 84% 22%) 12%, transparent),
        color-mix(in oklch, hsl(139deg 54% 40%) 17%, transparent)
    );
    /* Action buttons -- Warning Variant */
    --color-text-warning-solid-action-button: light-dark(
        color-mix(in oklch, hsl(0deg 0% 0%) 88%, transparent),
        color-mix(in oklch, hsl(0deg 0% 0%) 90%, transparent)
    );
    --color-background-warning-solid-action-button: light-dark(
        hsl(40deg 99% 62%),
        hsl(39deg 89% 45%)
    );
    --color-background-warning-solid-action-button-hover: light-dark(
        hsl(40deg 94% 56%),
        hsl(41deg 98% 46%)
    );
    --color-background-warning-solid-action-button-active: light-dark(
        hsl(41deg 98% 46%),
        hsl(39deg 89% 45%)
    );
    --color-text-warning-subtle-action-button: light-dark(
        hsl(34deg 89% 25%),
        hsl(40deg 94% 56%)
    );
    --color-background-warning-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(41deg 98% 46%) 18%, transparent),
        color-mix(in oklch, hsl(39deg 89% 45%) 12%, transparent)
    );
    --color-background-warning-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(41deg 98% 46%) 23%, transparent),
        color-mix(in oklch, hsl(39deg 89% 45%) 17%, transparent)
    );
    --color-background-warning-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(41deg 98% 46%) 28%, transparent),
        color-mix(in oklch, hsl(39deg 89% 45%) 12%, transparent)
    );
    --color-text-warning-text-action-button: light-dark(
        hsl(37deg 94% 34%),
        hsl(41deg 98% 46%)
    );
    --color-background-warning-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 10%, transparent),
        color-mix(in oklch, hsl(39deg 88% 42%) 12%, transparent)
    );
    --color-background-warning-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 14%, transparent),
        color-mix(in oklch, hsl(39deg 88% 42%) 17%, transparent)
    );
    /* Action buttons -- Danger Variant */
    --color-text-danger-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
    --color-background-danger-solid-action-button: light-dark(
        hsl(4deg 75% 53%),
        hsl(2deg 74% 47%)
    );
    --color-background-danger-solid-action-button-hover: light-dark(
        hsl(2deg 74% 47%),
        hsl(4deg 75% 53%)
    );
    --color-background-danger-solid-action-button-active: light-dark(
        hsl(359deg 93% 39%),
        hsl(2deg 74% 47%)
    );
    --color-text-danger-subtle-action-button: light-dark(
        hsl(359deg 94% 35%),
        hsl(7deg 100% 74%)
    );
    --color-background-danger-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(4deg 75% 53%) 13%, transparent),
        color-mix(in oklch, hsl(5deg 98% 65%) 12%, transparent)
    );
    --color-background-danger-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(4deg 75% 53%) 18%, transparent),
        color-mix(in oklch, hsl(5deg 98% 65%) 17%, transparent)
    );
    --color-background-danger-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(4deg 75% 53%) 23%, transparent),
        color-mix(in oklch, hsl(5deg 98% 65%) 12%, transparent)
    );
    --color-text-danger-text-action-button: light-dark(
        hsl(359deg 93% 39%),
        hsl(7deg 100% 74%)
    );
    --color-background-danger-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 9%, transparent),
        color-mix(in oklch, hsl(5deg 88% 60%) 12%, transparent)
    );
    --color-background-danger-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 13%, transparent),
        color-mix(in oklch, hsl(5deg 88% 60%) 17%, transparent)
    );

    /* Icon buttons */
    /* Icon buttons -- Neutral Variant */
    --color-text-neutral-icon-button: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent),
        color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent)
    );
    --color-text-neutral-icon-button-hover: light-dark(
        hsl(229deg 9% 36%),
        hsl(229deg 10% 70%)
    );
    --color-text-neutral-icon-button-active: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent),
        color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent)
    );
    --color-text-neutral-icon-button-square-active: light-dark(
        hsl(229deg 9% 36%),
        hsl(229deg 10% 70%)
    );
    --color-background-neutral-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 7%, transparent),
        color-mix(in oklch, hsl(230deg 9% 60%) 14%, transparent)
    );
    --color-background-neutral-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 11%, transparent),
        color-mix(in oklch, hsl(230deg 9% 60%) 18%, transparent)
    );
    /* Icon buttons -- Brand Variant */
    --color-text-brand-icon-button: light-dark(
        color-mix(in oklch, hsl(255deg 54% 50%) 70%, transparent),
        color-mix(in oklch, hsl(246deg 96 79%) 70%, transparent)
    );
    --color-text-brand-icon-button-hover: light-dark(
        hsl(255deg 54% 50%),
        hsl(246deg 96% 79%)
    );
    --color-text-brand-icon-button-active: light-dark(
        color-mix(in oklch, hsl(255deg 54% 50%) 70%, transparent),
        color-mix(in oklch, hsl(246deg 96% 79%) 70%, transparent)
    );
    --color-text-brand-icon-button-square-active: light-dark(
        hsl(255deg 54% 50%),
        hsl(246deg 96% 79%)
    );
    --color-background-brand-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(264deg 100% 22%) 5%, transparent),
        color-mix(in oklch, hsl(251deg 100% 72%) 14%, transparent)
    );
    --color-background-brand-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(264deg 100% 22%) 10%, transparent),
        color-mix(in oklch, hsl(251deg 100% 72%) 18%, transparent)
    );
    /* Icon buttons -- Info Variant */
    --color-text-info-icon-button: light-dark(
        color-mix(in oklch, hsl(227deg 70% 46%) 70%, transparent),
        color-mix(in oklch, hsl(222deg 97% 75%) 70%, transparent)
    );
    --color-text-info-icon-button-hover: light-dark(
        hsl(227deg 70% 46%),
        hsl(222deg 97% 75%)
    );
    --color-text-info-icon-button-active: light-dark(
        color-mix(in oklch, hsl(227deg 70% 46%) 70%, transparent),
        color-mix(in oklch, hsl(222deg 97% 75%) 70%, transparent)
    );
    --color-text-info-icon-button-square-active: light-dark(
        hsl(227deg 70% 46%),
        hsl(222deg 97% 75%)
    );
    --color-background-info-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(241deg 95% 25%) 5%, transparent),
        color-mix(in oklch, hsl(224deg 98% 65%) 12%, transparent)
    );
    --color-background-info-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(241deg 95% 25%) 9%, transparent),
        color-mix(in oklch, hsl(224deg 98% 65%) 17%, transparent)
    );
    /* Icon buttons -- Success Variant */
    --color-text-success-icon-button: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 70%, transparent),
        color-mix(in oklch, hsl(136deg 47% 55%) 70%, transparent)
    );
    --color-text-success-icon-button-hover: light-dark(
        hsl(146deg 90% 27%),
        hsl(136deg 47% 55%)
    );
    --color-text-success-icon-button-active: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 70%, transparent),
        color-mix(in oklch, hsl(136deg 47% 55%) 70%, transparent)
    );
    --color-text-success-icon-button-square-active: light-dark(
        hsl(146deg 90% 27%),
        hsl(136deg 47% 55%)
    );
    --color-background-success-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(144deg 84% 22%) 8%, transparent),
        color-mix(in oklch, hsl(139deg 54% 40%) 12%, transparent)
    );
    --color-background-success-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(144deg 84% 22%) 12%, transparent),
        color-mix(in oklch, hsl(139deg 54% 40%) 17%, transparent)
    );
    /* Icon buttons -- Warning Variant */
    --color-text-warning-icon-button: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 70%, transparent),
        color-mix(in oklch, hsl(41deg 98% 46%) 70%, transparent)
    );
    --color-text-warning-icon-button-hover: light-dark(
        hsl(37deg 94% 34%),
        hsl(41deg 98% 46%)
    );
    --color-text-warning-icon-button-active: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 70%, transparent),
        color-mix(in oklch, hsl(41deg 98% 46%) 70%, transparent)
    );
    --color-text-warning-icon-button-square-active: light-dark(
        hsl(37deg 94% 34%),
        hsl(41deg 98% 46%)
    );
    --color-background-warning-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 10%, transparent),
        color-mix(in oklch, hsl(39deg 88% 42%) 12%, transparent)
    );
    --color-background-warning-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 14%, transparent),
        color-mix(in oklch, hsl(39deg 88% 42%) 17%, transparent)
    );
    /* Icon buttons -- Danger Variant */
    --color-text-danger-icon-button: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 70%, transparent),
        color-mix(in oklch, hsl(7deg 100% 74%) 70%, transparent)
    );
    --color-text-danger-icon-button-hover: light-dark(
        hsl(359deg 93% 39%),
        hsl(7deg 100% 74%)
    );
    --color-text-danger-icon-button-active: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 70%, transparent),
        color-mix(in oklch, hsl(7deg 100% 74%) 70%, transparent)
    );
    --color-text-danger-icon-button-square-active: light-dark(
        hsl(359deg 93% 39%),
        hsl(7deg 100% 74%)
    );
    --color-background-danger-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 9%, transparent),
        color-mix(in oklch, hsl(5deg 88% 60%) 12%, transparent)
    );
    --color-background-danger-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 13%, transparent),
        color-mix(in oklch, hsl(5deg 88% 60%) 17%, transparent)
    );

    /* Banners */
    /* NOTE: These colors are also used in starlight help center for
       aside colors. Do grep for these variable when changing them
       and confirm on CZO on whether the colors there need to change
       as well. */
    --color-text-link-banner: hsl(210deg 94% 42%);
    /* Banners - Neutral Variant */
    --color-text-neutral-banner: light-dark(
        hsl(229deg 12% 25%),
        hsl(231deg 11% 76%)
    );
    --color-border-neutral-banner: light-dark(
        color-mix(in oklch, hsl(240deg 2% 30%) 40%, transparent),
        color-mix(in oklch, hsl(240deg 7% 66%) 40%, transparent)
    );
    --color-background-neutral-banner: light-dark(
        hsl(240deg 7% 93%),
        hsl(240deg 7% 17%)
    );
    /* Banners - Brand Variant */
    --color-text-brand-banner: light-dark(
        hsl(264deg 95% 34%),
        hsl(244deg 96% 82%)
    );
    --color-border-brand-banner: light-dark(
        color-mix(in oklch, hsl(254deg 60% 50%) 40%, transparent),
        color-mix(in oklch, hsl(253deg 70% 89%) 40%, transparent)
    );
    --color-background-brand-banner: light-dark(
        hsl(254deg 42% 94%),
        hsl(254deg 49% 16%)
    );
    /* Banners - Info Variant */
    --color-text-info-banner: light-dark(
        hsl(241deg 95% 25%),
        hsl(221deg 93% 89%)
    );
    --color-border-info-banner: light-dark(
        color-mix(in oklch, hsl(204deg 49% 29%) 40%, transparent),
        color-mix(in oklch, hsl(205deg 58% 69%) 40%, transparent)
    );
    --color-background-info-banner: light-dark(
        hsl(204deg 58% 92%),
        hsl(204deg 100% 12%)
    );
    /* Banners - Success Variant */
    --color-text-success-banner: light-dark(
        hsl(144deg 88% 16%),
        hsl(135deg 56% 63%)
    );
    --color-border-success-banner: light-dark(
        color-mix(in oklch, hsl(147deg 57% 25%) 40%, transparent),
        color-mix(in oklch, hsl(149deg 48% 52%) 40%, transparent)
    );
    --color-background-success-banner: light-dark(
        hsl(147deg 43% 92%),
        hsl(146deg 90% 7%)
    );
    /* Banners - Warning Variant */
    --color-text-warning-banner: light-dark(
        hsl(34deg 89% 25%),
        hsl(40deg 94% 56%)
    );
    --color-border-warning-banner: light-dark(
        color-mix(in oklch, hsl(38deg 44% 27%) 40%, transparent),
        color-mix(in oklch, hsl(44deg 44% 66%) 40%, transparent)
    );
    --color-background-warning-banner: light-dark(
        hsl(50deg 75% 92%),
        hsl(50deg 100% 10%)
    );
    /* Banners - Danger Variant */
    --color-text-danger-banner: light-dark(
        hsl(359deg 94% 35%),
        hsl(7deg 100% 74%)
    );
    --color-border-danger-banner: light-dark(
        color-mix(in oklch, hsl(3deg 57% 33%) 40%, transparent),
        color-mix(in oklch, hsl(3deg 73% 74%) 40%, transparent)
    );
    --color-background-danger-banner: light-dark(
        hsl(0deg 35% 92%),
        hsl(0deg 52% 18%)
    );

    /* Inputs */
    /* Legacy input colors */
    /* TODO: Remove these variables after migrating all the inputs to use the new input colors. */
    --color-background-legacy-input: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-legacy-input: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-legacy-input-focus: light-dark(
        hsl(206deg 80% 62% / 80%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-background-disabled-settings-select: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-disabled-modal-select: light-dark(
        hsl(0deg 0% 90%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-text-input: light-dark(hsl(0deg 0% 14%), hsl(0deg 0% 95%));
    /* TODO: Light mode uses browser-default white
       backgrounds; we should extend the use of this
       color variable to 1) explicitly set the
       background color of inputs, and 2) clean up a
       lingering stack of selectors in dark_theme.css. */
    --color-background-input: light-dark(hsl(0deg 0% 100%), hsl(225deg 6% 10%));
    --color-background-input-focus: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 7%)
    );
    --color-outline-input: light-dark(
        color-mix(in oklch, hsl(229deg 22% 10%) 30%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 20%, transparent)
    );
    --color-outline-input-hover: light-dark(
        color-mix(in oklch, hsl(229deg 22% 10%) 60%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 40%, transparent)
    );
    --color-outline-input-focus: light-dark(
        color-mix(in oklch, hsl(229deg 22% 10%) 80%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 50%, transparent)
    );
    --color-box-shadow-input-focus: light-dark(
        color-mix(in oklch, hsl(228deg 10% 20%) 30%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 40%, transparent)
    );

    /* .main-view-banner colors */
    --color-success-main-view-banner: light-dark(
        hsl(147deg 57% 25%),
        hsl(147deg 51% 80%)
    );
    --color-background-success-main-view-banner: light-dark(
        hsl(147deg 43% 92%),
        hsl(147deg 100% 8%)
    );
    --color-border-success-main-view-banner: light-dark(
        hsl(147deg 57% 25% / 40%),
        hsl(149deg 48% 52% / 40%)
    );
    --color-success-main-view-banner-close-button: light-dark(
        hsl(147deg 57% 25% / 50%),
        hsl(147deg 51% 55% / 50%)
    );
    --color-success-main-view-banner-close-button-hover: light-dark(
        hsl(147deg 57% 25%),
        hsl(147deg 51% 55%)
    );
    --color-success-main-view-banner-close-button-active: light-dark(
        hsl(147deg 57% 25% / 75%),
        hsl(147deg 51% 55% / 75%)
    );
    --color-background-success-main-view-banner-action-button: light-dark(
        hsl(147deg 57% 25% / 10%),
        hsl(147deg 51% 55% / 10%)
    );
    --color-background-success-main-view-banner-action-button-hover: light-dark(
        hsl(147deg 57% 25% / 12%),
        hsl(147deg 51% 55% / 15%)
    );
    --color-background-success-main-view-banner-action-button-active: light-dark(
        hsl(147deg 57% 25% / 15%),
        hsl(147deg 51% 55% / 20%)
    );
    --color-warning-main-view-banner: light-dark(
        hsl(38deg 44% 27%),
        hsl(50deg 45% 80%)
    );
    --color-background-warning-main-view-banner: light-dark(
        hsl(50deg 75% 92%),
        hsl(53deg 100% 11%)
    );
    --color-border-warning-main-view-banner: light-dark(
        hsl(38deg 44% 27% / 40%),
        hsl(38deg 44% 60% / 40%)
    );
    --color-warning-main-view-banner-close-button: light-dark(
        hsl(38deg 44% 27% / 50%),
        hsl(50deg 45% 61% / 50%)
    );
    --color-warning-main-view-banner-close-button-hover: light-dark(
        hsl(38deg 44% 27%),
        hsl(50deg 45% 61%)
    );
    --color-warning-main-view-banner-close-button-active: light-dark(
        hsl(38deg 44% 27% / 75%),
        hsl(50deg 45% 61% / 75%)
    );
    --color-warning-main-view-banner-action-button: light-dark(
        inherit,
        hsl(50deg 45% 61%)
    );
    --color-background-warning-main-view-banner-action-button: light-dark(
        hsl(38deg 44% 27% / 10%),
        hsl(50deg 45% 61% / 10%)
    );
    --color-background-warning-main-view-banner-action-button-hover: light-dark(
        hsl(38deg 44% 27% / 12%),
        hsl(50deg 45% 61% / 15%)
    );
    --color-background-warning-main-view-banner-action-button-active: light-dark(
        hsl(38deg 44% 27% / 15%),
        hsl(50deg 45% 61% / 20%)
    );
    --color-error-main-view-banner: light-dark(
        hsl(4deg 58% 33%),
        hsl(3deg 73% 80%)
    );
    --color-background-error-main-view-banner: light-dark(
        hsl(4deg 35% 90%),
        hsl(0deg 60% 19%)
    );
    --color-border-error-main-view-banner: light-dark(
        hsl(3deg 57% 33% / 40%),
        hsl(3deg 73% 74% / 40%)
    );
    --color-error-main-view-banner-close-button: light-dark(
        hsl(4deg 58% 33% / 50%),
        hsl(3deg 73% 74% / 50%)
    );
    --color-error-main-view-banner-close-button-hover: light-dark(
        hsl(4deg 58% 33%),
        hsl(3deg 73% 74%)
    );
    --color-error-main-view-banner-close-button-active: light-dark(
        hsl(4deg 58% 33% / 75%),
        hsl(3deg 73% 74% / 75%)
    );
    --color-error-main-view-banner-action-button: light-dark(
        inherit,
        hsl(3deg 73% 74%)
    );
    --color-background-error-main-view-banner-action-button: light-dark(
        hsl(3deg 57% 33% / 10%),
        hsl(3deg 73% 74% / 10%)
    );
    --color-background-error-main-view-banner-action-button-hover: light-dark(
        hsl(3deg 57% 33% / 12%),
        hsl(3deg 73% 74% / 15%)
    );
    --color-background-error-main-view-banner-action-button-active: light-dark(
        hsl(3deg 57% 33% / 15%),
        hsl(3deg 73% 74% / 20%)
    );
    --color-info-main-view-banner: light-dark(
        hsl(204deg 49% 29%),
        hsl(205deg 58% 80%)
    );
    --color-background-info-main-view-banner: light-dark(
        hsl(204deg 58% 92%),
        hsl(204deg 100% 12%)
    );
    --color-border-info-main-view-banner: light-dark(
        hsl(204deg 49% 29% / 40%),
        hsl(205deg 58% 69% / 40%)
    );
    --color-info-main-view-banner-close-button: light-dark(
        hsl(204deg 49% 29% / 50%),
        hsl(205deg 58% 69% / 50%)
    );
    --color-info-main-view-banner-close-button-hover: light-dark(
        hsl(204deg 49% 29%),
        hsl(205deg 58% 69%)
    );
    --color-info-main-view-banner-close-button-active: light-dark(
        hsl(204deg 49% 29% / 75%),
        hsl(205deg 58% 69% / 75%)
    );
    --color-info-main-view-banner-action-button: light-dark(
        inherit,
        hsl(205deg 58% 69%)
    );
    --color-background-info-main-view-banner-action-button: light-dark(
        hsl(204deg 49% 29% / 10%),
        hsl(205deg 58% 69% / 10%)
    );
    --color-background-info-main-view-banner-action-button-hover: light-dark(
        hsl(204deg 49% 29% / 12%),
        hsl(205deg 58% 69% / 15%)
    );
    --color-background-info-main-view-banner-action-button-active: light-dark(
        hsl(204deg 49% 29% / 15%),
        hsl(205deg 58% 69% / 20%)
    );
    --color-main-view-banner-action-link: light-dark(
        var(--color-text-generic-link),
        hsl(200deg 100% 50%)
    );
    --color-background-main-view-banner-moving-bar: light-dark(
        hsl(204deg 63% 85%),
        hsl(204deg 63% 18%)
    );

    /* Info density update UI */
    --color-info-density-control-border: light-dark(
        hsl(0deg 0% 0% / 20%),
        hsl(0deg 0% 90% / 20%)
    );
    --color-info-density-button-icon: light-dark(
        hsl(229deg 9% 36%),
        hsl(0deg 0% 100% / 80%)
    );
    --color-info-density-button-hover-background: light-dark(
        hsl(229deg 9% 36% / 7%),
        hsl(229deg 10% 50% / 30%)
    );
}

%dark-theme {
    /* There is no lefthand border to cover in dark mode, so
       don't apply negative margin that would otherwise pull
       the unread marker to the left. */
    --unread-marker-left: 0;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: 0 0 30px hsl(212deg 32% 7%);

    /* Shadow layers use full-opacity black on dark backgrounds so the drop
       shadow still reads as a crisp separation. */
    --box-shadow-sidebar-sticky-header-drop:
        0 1px 1px -1px hsl(0deg 0% 0%), 0 3px 4px -5px hsl(0deg 0% 0%),
        0 4px 9px -10px hsl(0deg 0% 0%), 0 12px 12px -13px hsl(0deg 0% 0%);

    /* Colors used across the app */
    --color-recipient-bar-controls-spinner: hsl(0deg 0% 100%);
    --box-shadow-unread-counter-normal: none;

    /* Text colors */
    --color-text-sender-name: hsl(0deg 0% 100% / 85%);
    --color-text-other-mention: hsl(0deg 0% 100% / 80%);
    --color-text-empty-list-message: hsl(0deg 0% 67%);

    /* Settings table colors */
    --color-background-notification-table-thead: hsl(0deg 0% 0% / 20%);

    /* Custom profile field choice editor */
    --opacity-disabled-profile-field-choice-input: 0.5;

    /* Reaction container colors */
    --font-weight-message-reaction: 550;
    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.12px 0 hsl(0deg 0% 0% / 10%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
        0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
        0 41px 80px 0 hsl(0deg 0% 0% / 20%);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23DEDEDE' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z'/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    --color-exit-button-text: hsl(0deg 0% 100%);
    --color-exit-button-background: hsl(226deg 1% 30% / 50%);
    --color-exit-button-background-interactive: hsl(226deg 1% 30% / 65%);

    /* Zulip-style checkbox values. */
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url("../images/checkbox-dark-mode.svg");

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url("../images/loading/loader-white.svg");

    /* Zulip resizer handle svg */
    --svg-resize-handle: url("../images/resize-handle-white.svg");
    --recent-view-body-border-width: 0.1875em; /* 3px at 16px/1em */
}

@media screen {
    :root.dark-theme {
        @extend %dark-theme;
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root.color-scheme-automatic {
        @extend %dark-theme;
    }
}