/* Cobrix theme for Zulip 12.1.
 * Source of truth: cobrix-front origin/develop@885d289.
 * This file intentionally overrides semantic Zulip variables instead of
 * changing component layouts, keeping the theme resilient to upgrades.
 */

@font-face {
    font-family: "Elms Sans Variable";
    src: url("/static/cobrix/elms-sans-latin-wght-normal.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Elms Sans Variable";
    src: url("/static/cobrix/elms-sans-latin-wght-italic.woff2") format("woff2-variations");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono Variable";
    src: url("/static/cobrix/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono Variable";
    src: url("/static/cobrix/jetbrains-mono-latin-wght-italic.woff2") format("woff2-variations");
    font-style: italic;
    font-weight: 100 800;
    font-display: swap;
}

:root {
    --cobrix-sky: #00aef7;
    --cobrix-cyber-green: #02ff92;
    --cobrix-dark-teal: #014946;
    --cobrix-violet: #c43dff;
    --cobrix-ink: #071213;
    --cobrix-on-dark: #ffffff;
    --cobrix-compose-new-message-text: var(--cobrix-on-dark);

    /* Minimal neutral light surfaces: near-white canvas, cool-grey navigation,
     * and crisp white content without the previous ivory cast. */
    --color-background: #f7f7f8;
    --color-background-navbar: #f2f3f4;
    --color-navbar-bottom-border: #e2e4e7;
    --color-background-stream-message-content: #ffffff;
    --color-background-private-message-content: #fafafa;
    --color-background-private-message-header: #f0f1f2;
    --color-background-widget-input: #ffffff;
    --color-background-active-narrow-filter: #ffffff;
    --color-background-hover-narrow-filter: #eceef0;
    --color-background-search: #ffffff;
    --color-background-search-collapsed: #ffffff;
    --color-background-popover-menu: #ffffff;
    --color-background-popover: #ffffff;
    --color-background-white-box: #ffffff;
    --color-compose-box-background: #eceef0;
    --color-compose-message-content-background: #ffffff;
    --color-background-inbox-search: #ffffff;
    --color-background-inbox-search-hover: #f6f7f8;
    --color-background-inbox-search-focus: #ffffff;
    --color-background-inbox-row: #ffffff;

    /* Cobrix light-theme action contract. */
    --color-background-brand-solid-action-button: var(--cobrix-ink);
    --color-background-brand-solid-action-button-hover: var(--cobrix-dark-teal);
    --color-background-brand-solid-action-button-active: #003a38;
    --color-text-brand-solid-action-button: var(--cobrix-on-dark);
    --color-background-brand-subtle-action-button: rgb(0 174 247 / 12%);
    --color-background-brand-subtle-action-button-hover: rgb(0 174 247 / 18%);
    --color-background-brand-subtle-action-button-active: rgb(0 174 247 / 24%);
    --color-text-brand-subtle-action-button: var(--cobrix-dark-teal);
    --color-text-brand-text-action-button: var(--cobrix-dark-teal);
    --color-background-brand-text-action-button-hover: rgb(0 174 247 / 12%);
    --color-background-brand-text-action-button-active: rgb(0 174 247 / 18%);
    --color-text-brand-icon-button: var(--cobrix-dark-teal);

    /* Links, focus and main composer actions. */
    --color-text-link: var(--cobrix-dark-teal);
    --color-text-link-hover: #007eaa;
    --color-text-generic-link: var(--cobrix-dark-teal);
    --color-text-generic-link-interactive: #007eaa;
    --color-compose-send-button-background: var(--cobrix-ink);
    --color-compose-focus-ring: var(--cobrix-dark-teal);
    --color-compose-send-button-focus-border: var(--cobrix-dark-teal);
    --color-outline-focus: var(--cobrix-dark-teal);
    --color-outline-input-focus: var(--cobrix-dark-teal);
    --color-message-content-container-border-focus: var(--cobrix-dark-teal);

    /* Keep surfaces sober; brand appears as interaction and status accents. */
    --color-background-compose-new-message-button: var(--cobrix-ink);
    --color-background-compose-new-message-button-hover: var(--cobrix-dark-teal);
    --color-background-compose-new-message-button-active: #003a38;
    --color-border-compose-new-message-button: var(--cobrix-ink);
    --color-border-compose-new-message-button-hover: var(--cobrix-dark-teal);
    --color-border-compose-new-message-button-active: #003a38;
    --color-background-unread-counter-prominent: var(--cobrix-dark-teal);
    --color-background-unread-counter-dot: var(--cobrix-sky);
}

html,
body,
button,
input,
textarea,
select {
    font-family: "Elms Sans Variable", "Elms Sans", ui-sans-serif, system-ui, sans-serif;
}

pre,
code,
kbd,
samp,
.codehilite {
    font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
}

/* Give conversations Cobrix's technical voice without making navigation or
 * settings harder to scan. Message content and the composer use JetBrains;
 * the surrounding product UI remains Elms Sans. */
.message_content,
.message_edit_content,
#compose-textarea,
.new_message_textarea {
    font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
    font-variant-ligatures: contextual;
}

/* Extend the technical voice to the conversation map: the primary views and
 * channel/topic names in the left sidebar. Keep controls and settings in Elms. */
#left-sidebar-navigation-list,
#streams_list {
    font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
    font-variant-ligatures: contextual;
}

/* Folder headings organize channels and should retain the warmer UI voice. */
#streams_list .stream-list-subsection-header .left-sidebar-title {
    font-family: "Elms Sans Variable", "Elms Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Zulip's closed compose buttons normally inherit the global text color.
 * Our light theme uses an ink background here, so give both desktop and
 * mobile variants an explicit high-contrast foreground. */
#legacy-closed-compose-box .compose_mobile_button,
#legacy-closed-compose-box #new_direct_message_button {
    color: var(--cobrix-compose-new-message-text);
}

/* Cobrix light-mode chrome: replace Zulip's blue-violet navigation treatment
 * with Ink for structure and Dark Teal for interaction. Functional colors,
 * such as channel privacy indicators, remain untouched. */
:root:not(.dark-theme):not(.color-scheme-automatic) {
    --color-text-sidebar-heading: var(--cobrix-ink);
    --color-text-sidebar-action-heading: var(--cobrix-ink);
    --color-text-sidebar-action-heading-hover: var(--cobrix-dark-teal);
    --color-sidebar-action: var(--cobrix-ink);
    --color-sidebar-action-hover: var(--cobrix-dark-teal);
    --color-background-sidebar-action-hover: rgb(0 174 247 / 10%);
    --color-background-navigation-item-hover: rgb(0 174 247 / 8%);
    --color-left-sidebar-navigation-icon: var(--cobrix-ink);
    --color-left-sidebar-dm-partners-icon: var(--cobrix-dark-teal);
    --color-vdots-hint: rgb(7 18 19 / 40%);
    --color-vdots-visible: var(--cobrix-ink);
    --color-vdots-hover: var(--cobrix-dark-teal);
    --color-navbar-icon: var(--cobrix-ink);
    --opacity-sidebar-heading: 0.92;
    --opacity-sidebar-heading-icon: 0.72;
}

@media (prefers-color-scheme: light) {
    :root.color-scheme-automatic {
        --color-text-sidebar-heading: var(--cobrix-ink);
        --color-text-sidebar-action-heading: var(--cobrix-ink);
        --color-text-sidebar-action-heading-hover: var(--cobrix-dark-teal);
        --color-sidebar-action: var(--cobrix-ink);
        --color-sidebar-action-hover: var(--cobrix-dark-teal);
        --color-background-sidebar-action-hover: rgb(0 174 247 / 10%);
        --color-background-navigation-item-hover: rgb(0 174 247 / 8%);
        --color-left-sidebar-navigation-icon: var(--cobrix-ink);
        --color-left-sidebar-dm-partners-icon: var(--cobrix-dark-teal);
        --color-vdots-hint: rgb(7 18 19 / 40%);
        --color-vdots-visible: var(--cobrix-ink);
        --color-vdots-hover: var(--cobrix-dark-teal);
        --color-navbar-icon: var(--cobrix-ink);
        --opacity-sidebar-heading: 0.92;
        --opacity-sidebar-heading-icon: 0.72;
    }
}

:root.dark-theme {
    /* OLED palette: true black for the canvas, with restrained elevation for
     * messages, the composer, search, and transient surfaces. */
    --color-background: #000000;
    --color-background-navbar: #000000;
    --color-navbar-bottom-border: #1b1b1b;
    --color-background-stream-message-content: #050505;
    --color-background-private-message-content: #060606;
    --color-background-private-message-header: #0c0c0a;
    --color-background-widget-input: #080808;
    --color-background-active-narrow-filter: #121212;
    --color-background-hover-narrow-filter: #0d0d0d;
    --color-background-search: #0a0a0a;
    --color-background-search-collapsed: #0d0d0d;
    --color-background-popover-menu: #101010;
    --color-background-popover: #101010;
    --color-background-white-box: #080808;
    --color-compose-box-background: #0b0d0d;
    --color-compose-message-content-background: #030303;
    --color-background-inbox-search: #080808;
    --color-background-inbox-search-hover: #0c0c0c;
    --color-background-inbox-search-focus: #0e0e0e;
    --color-background-inbox-row: #070707;
    --cobrix-compose-new-message-text: var(--cobrix-ink);
    --color-background-brand-solid-action-button: var(--cobrix-cyber-green);
    --color-background-brand-solid-action-button-hover: var(--cobrix-sky);
    --color-background-brand-solid-action-button-active: #00d97e;
    --color-text-brand-solid-action-button: var(--cobrix-ink);
    --color-background-brand-subtle-action-button: rgb(2 255 146 / 12%);
    --color-background-brand-subtle-action-button-hover: rgb(2 255 146 / 18%);
    --color-background-brand-subtle-action-button-active: rgb(2 255 146 / 24%);
    --color-text-brand-subtle-action-button: var(--cobrix-cyber-green);
    --color-text-brand-text-action-button: var(--cobrix-cyber-green);
    --color-background-brand-text-action-button-hover: rgb(2 255 146 / 12%);
    --color-background-brand-text-action-button-active: rgb(2 255 146 / 18%);
    --color-text-brand-icon-button: var(--cobrix-cyber-green);
    --color-text-link: var(--cobrix-sky);
    --color-text-link-hover: #67ceff;
    --color-text-generic-link: var(--cobrix-sky);
    --color-text-generic-link-interactive: #67ceff;
    --color-compose-send-button-background: var(--cobrix-cyber-green);
    --color-compose-focus-ring: var(--cobrix-sky);
    --color-compose-send-button-focus-border: var(--cobrix-sky);
    --color-outline-focus: var(--cobrix-sky);
    --color-outline-input-focus: var(--cobrix-sky);
    --color-message-content-container-border-focus: var(--cobrix-sky);
    --color-background-compose-new-message-button: var(--cobrix-cyber-green);
    --color-background-compose-new-message-button-hover: var(--cobrix-sky);
    --color-background-compose-new-message-button-active: #00d97e;
    --color-border-compose-new-message-button: var(--cobrix-cyber-green);
    --color-border-compose-new-message-button-hover: var(--cobrix-sky);
    --color-border-compose-new-message-button-active: #00d97e;
    --color-background-unread-counter-prominent: var(--cobrix-cyber-green);
    --color-background-unread-counter-dot: var(--cobrix-sky);
}

/* Keep bright Cyber Green controls legible in explicit dark mode. */
:root.dark-theme #legacy-closed-compose-box .compose_mobile_button,
:root.dark-theme #legacy-closed-compose-box #new_direct_message_button {
    color: var(--cobrix-ink) !important;
}

@media (prefers-color-scheme: dark) {
    :root.color-scheme-automatic {
        --color-background: #000000;
        --color-background-navbar: #000000;
        --color-navbar-bottom-border: #1b1b1b;
        --color-background-stream-message-content: #050505;
        --color-background-private-message-content: #060606;
        --color-background-private-message-header: #0c0c0a;
        --color-background-widget-input: #080808;
        --color-background-active-narrow-filter: #121212;
        --color-background-hover-narrow-filter: #0d0d0d;
        --color-background-search: #0a0a0a;
        --color-background-search-collapsed: #0d0d0d;
        --color-background-popover-menu: #101010;
        --color-background-popover: #101010;
        --color-background-white-box: #080808;
        --color-compose-box-background: #0b0d0d;
        --color-compose-message-content-background: #030303;
        --color-background-inbox-search: #080808;
        --color-background-inbox-search-hover: #0c0c0c;
        --color-background-inbox-search-focus: #0e0e0e;
        --color-background-inbox-row: #070707;
        --cobrix-compose-new-message-text: var(--cobrix-ink);
        --color-background-brand-solid-action-button: var(--cobrix-cyber-green);
        --color-background-brand-solid-action-button-hover: var(--cobrix-sky);
        --color-background-brand-solid-action-button-active: #00d97e;
        --color-text-brand-solid-action-button: var(--cobrix-ink);
        --color-background-brand-subtle-action-button: rgb(2 255 146 / 12%);
        --color-background-brand-subtle-action-button-hover: rgb(2 255 146 / 18%);
        --color-background-brand-subtle-action-button-active: rgb(2 255 146 / 24%);
        --color-text-brand-subtle-action-button: var(--cobrix-cyber-green);
        --color-text-brand-text-action-button: var(--cobrix-cyber-green);
        --color-text-brand-icon-button: var(--cobrix-cyber-green);
        --color-text-link: var(--cobrix-sky);
        --color-text-link-hover: #67ceff;
        --color-text-generic-link: var(--cobrix-sky);
        --color-text-generic-link-interactive: #67ceff;
        --color-compose-send-button-background: var(--cobrix-cyber-green);
        --color-compose-focus-ring: var(--cobrix-sky);
        --color-outline-focus: var(--cobrix-sky);
        --color-outline-input-focus: var(--cobrix-sky);
        --color-background-compose-new-message-button: var(--cobrix-cyber-green);
        --color-background-compose-new-message-button-hover: var(--cobrix-sky);
        --color-background-compose-new-message-button-active: #00d97e;
        --color-background-unread-counter-prominent: var(--cobrix-cyber-green);
        --color-background-unread-counter-dot: var(--cobrix-sky);
    }

    /* Same contrast rule when Zulip follows the operating-system theme. */
    :root.color-scheme-automatic #legacy-closed-compose-box .compose_mobile_button,
    :root.color-scheme-automatic #legacy-closed-compose-box #new_direct_message_button {
        color: var(--cobrix-ink) !important;
    }
}