/* ==========================================================================
   Harbour.Space theme for the Zulip trial
   --------------------------------------------------------------------------
   Loaded last from templates/zerver/base.html (see ../base.html), so it can
   override the webpack bundles without !important in most places.

   Colours and the type stack are lifted from the production marketing site
   (harbourspace-org/website): `src/utils/styles.ts` for the shipping palette,
   `src/designSystem/colors.ts` for the purple ramp, `src/styles/apercu-pro.css`
   for the font faces. Nothing here is invented except the dark surfaces —
   harbour.space has no dark theme, so the dark greys are Zulip's neutrals
   pulled towards the brand hue (260deg) and the accent is purple-400
   (#9d8cff), which the design system already calls `purple.default`.

   How Zulip 12 does themes, and why every override is written twice:
   its stylesheets are compiled through the postcss light-dark() polyfill, so a
   themed value ends up as
       --color-x: var(--csstools-light-dark-toggle--N, <light value>);
   with the *dark* value hidden inside the toggle. Setting `--color-x` once on
   :root would therefore paint the light value into both themes. Instead each
   block below is repeated for the three states Zulip actually renders:
       :root                                      -> light
       .dark-theme:root                           -> dark, chosen explicitly
       @media (prefers-color-scheme: dark)
         .color-scheme-automatic:root             -> dark, following the OS
   `.dark-theme:root` also out-specifies a plain `:root`, so the repetition is
   load-bearing, not just for readability.

   Scope: colour, type, radius. No layout, no spacing, no z-index — those are
   where a CSS overlay breaks an app it doesn't own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Apercu Pro
   Self-hosted next to this file rather than hotlinked from harbour.space, so
   the theme has no cross-origin dependency. Only light (300) and medium ship
   as woff2 on the website; bold is woff only, hence the odd one out. 500 and
   600 are mapped deliberately: Zulip asks for 500/600 in sender names and
   headings, and mapping them to real cuts avoids the browser synthesising a
   fake bold.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Apercu Pro";
    src: url("/local-static/fonts/apercupro-light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Apercu Pro";
    src: url("/local-static/fonts/apercupro-medium.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Apercu Pro";
    src: url("/local-static/fonts/apercupro-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Apercu Pro";
    src: url("/local-static/fonts/apercupro-bold.woff") format("woff");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Brand primitives
   Hue-consistent, so anything derived from them stays in family.
   -------------------------------------------------------------------------- */
:root {
    /* Purple ramp — src/designSystem/colors.ts. 700 is the brand purple that
       the marketing site ships as `colors.brand`. */
    --hs-purple-50: #f4f2ff;
    --hs-purple-100: #e1dbff;
    --hs-purple-200: #c1b4ff;
    --hs-purple-300: #9a83ff;
    --hs-purple-400: #7d51ff;
    --hs-purple-500: #6d2cf3;
    --hs-purple-600: #5929b9;
    --hs-purple-700: #4b2696;
    --hs-purple-800: #3c1e75;
    --hs-purple-900: #2b1751;
    --hs-purple-950: #1d0f39;
    --hs-purple-default: #9d8cff;

    /* Neutrals and semantics — src/utils/styles.ts */
    --hs-brand-hover: #6336cb;
    --hs-ink: #242424;
    --hs-link: #523996;
    --hs-link-hover: #685dc5;
    --hs-border: #e6e6e6;
    --hs-green: #4fa16c;
    --hs-red: #ec5857;
    --hs-amber: #f2994a;

    /* Dark surfaces: neutral greys pulled to the brand hue. */
    --hs-dark-canvas: #17151d;
    --hs-dark-surface: #1e1b26;
    --hs-dark-raised: #262231;
    --hs-dark-border: #322d40;
    --hs-dark-ink: #ded9ea;

    --hs-font:
        "Apercu Pro", "Source Sans 3 VF", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* One step softer than Zulip's 4/5px, one step tighter than the 16px the
       marketing site uses on big panels. `radiusM` in the website's
       ContactDrawer token set is 8px; that is the reference. */
    --hs-radius-sm: 6px;
    --hs-radius-md: 8px;
    --hs-radius-lg: 12px;
}

/* --------------------------------------------------------------------------
   3. Type
   `body` alone would be enough for the app, but form controls do not inherit
   font-family in any browser, and the tippy tooltips force theirs with
   !important. Icon fonts (zulip-icons, FontAwesome) declare their own family on
   their own selectors, so inheriting here does not disturb them.
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea,
.action-button,
.new-style button,
.new-style .input-box input {
    font-family: var(--hs-font);
}

[data-tippy-root],
[data-tippy-root] .tippy-box {
    font-family: var(--hs-font) !important;
}

/* Apercu's default figures are proportional; tabular ones keep timestamps and
   unread counts from jittering as they update. */
.message-time,
.unread_count,
.recipient_row_date {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. App chrome — light
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces. The shell carries a trace of purple (about 4% saturation) so
       white message cards read as raised rather than as the same sheet of
       paper; Zulip's stock hsl(0deg 0% 94%) is flat grey. */
    --color-background: #f4f3f8;
    --color-background-navbar: #ffffff;
    --color-background-stream-message-content: #ffffff;
    --color-background-widget: #ffffff;
    --color-compose-box-background: #eae7f4;
    --color-compose-message-content-background: #ffffff;
    --color-compose-recipient-box-background-color: #ffffff;

    /* Text */
    --color-text-default: var(--hs-ink);
    --color-text-message-default: var(--hs-ink);
    --color-text-sender-name: var(--hs-ink);
    --color-text-generic-link: var(--hs-link);
    --color-text-generic-link-interactive: var(--hs-link-hover);
    --color-markdown-link: var(--hs-link);
    --color-markdown-link-hover: var(--hs-link-hover);
    --color-text-url: var(--hs-link);
    --color-text-url-hover: var(--hs-link-hover);

    /* Primary action. Zulip's stock brand is a periwinkle a hue away from ours;
       swapping the ramp is most of what makes buttons read as Harbour.Space. */
    --color-background-brand-solid-action-button: var(--hs-purple-700);
    --color-background-brand-solid-action-button-hover: var(--hs-purple-600);
    --color-background-brand-solid-action-button-active: var(--hs-purple-800);
    --color-compose-send-button-background: var(--hs-purple-700);
    --color-compose-send-button-background-interactive: var(--hs-purple-800);
    --color-background-animated-button-hover: var(--hs-purple-600);
    --color-text-brand-icon-button: var(--hs-purple-700);
    --color-text-brand-icon-button-hover: var(--hs-purple-600);
    --color-text-brand-text-action-button: var(--hs-purple-700);
    --color-text-brand-subtle-action-button: var(--hs-purple-700);

    /* Selection, hover and focus. */
    --color-background-active-narrow-filter: #ffffff;
    --color-background-hover-narrow-filter: #ffffff;
    --color-background-navigation-item-hover: rgb(75 38 150 / 7%);
    --color-background-sidebar-action-hover: var(--hs-purple-100);
    --color-left-sidebar-navigation-icon: var(--hs-purple-700);
    --color-left-sidebar-dm-partners-icon: var(--hs-purple-600);
    --color-outline-focus: var(--hs-purple-500);
    --color-compose-focus-ring: var(--hs-purple-500);

    /* Unread markers: the single loudest colour in the sidebar. */
    --color-background-unread-counter-prominent: var(--hs-purple-700);
    --color-background-unread-counter-normal: rgb(75 38 150 / 22%);
    --color-background-unread-counter-dot: var(--hs-purple-700);
    --color-border-unread-counter: transparent;
    --color-masked-unread-marker: var(--hs-purple-300);

    /* Borders. */
    --color-border-sidebar: var(--hs-border);
    --color-message-header-contents-border: rgb(0 0 0 / 8%);
    --color-message-header-contents-border-bottom: rgb(0 0 0 / 5%);

    /* Semantics, aligned to the marketing palette. */
    --color-background-success-solid-action-button: var(--hs-green);
    --color-background-danger-solid-action-button: var(--hs-red);
    --color-background-warning-solid-action-button: var(--hs-amber);
}

/* --------------------------------------------------------------------------
   5. App chrome — dark
   Duplicated for the explicit and the OS-following selector. Keep the two
   blocks identical; if they drift, one of the two themes silently rots.
   -------------------------------------------------------------------------- */
.dark-theme:root {
    --color-background: var(--hs-dark-canvas);
    --color-background-navbar: var(--hs-dark-surface);
    --color-background-stream-message-content: var(--hs-dark-surface);
    --color-background-widget: var(--hs-dark-raised);
    --color-compose-box-background: var(--hs-dark-raised);
    --color-compose-message-content-background: var(--hs-dark-canvas);
    --color-compose-recipient-box-background-color: var(--hs-dark-canvas);

    --color-text-default: var(--hs-dark-ink);
    --color-text-message-default: var(--hs-dark-ink);
    --color-text-sender-name: #ffffff;
    --color-text-generic-link: var(--hs-purple-200);
    --color-text-generic-link-interactive: var(--hs-purple-100);
    --color-markdown-link: var(--hs-purple-200);
    --color-markdown-link-hover: var(--hs-purple-100);
    --color-text-url: var(--hs-purple-200);
    --color-text-url-hover: var(--hs-purple-100);

    --color-background-brand-solid-action-button: var(--hs-brand-hover);
    --color-background-brand-solid-action-button-hover: var(--hs-purple-400);
    --color-background-brand-solid-action-button-active: var(--hs-purple-700);
    --color-compose-send-button-background: var(--hs-brand-hover);
    --color-compose-send-button-background-interactive: var(--hs-purple-400);
    --color-background-animated-button-hover: var(--hs-purple-400);
    --color-text-brand-icon-button: var(--hs-purple-default);
    --color-text-brand-icon-button-hover: var(--hs-purple-200);
    --color-text-brand-text-action-button: var(--hs-purple-default);
    --color-text-brand-subtle-action-button: var(--hs-purple-default);

    --color-background-active-narrow-filter: var(--hs-dark-raised);
    --color-background-hover-narrow-filter: var(--hs-dark-surface);
    --color-background-navigation-item-hover: rgb(157 140 255 / 12%);
    --color-background-sidebar-action-hover: var(--hs-dark-raised);
    --color-left-sidebar-navigation-icon: var(--hs-purple-default);
    --color-left-sidebar-dm-partners-icon: var(--hs-purple-300);
    --color-outline-focus: var(--hs-purple-400);
    --color-compose-focus-ring: var(--hs-purple-400);

    --color-background-unread-counter-prominent: var(--hs-purple-400);
    --color-background-unread-counter-normal: rgb(157 140 255 / 28%);
    --color-background-unread-counter-dot: var(--hs-purple-400);
    --color-border-unread-counter: transparent;
    --color-masked-unread-marker: var(--hs-purple-600);

    --color-border-sidebar: var(--hs-dark-border);
    --color-message-header-contents-border: rgb(255 255 255 / 7%);
    --color-message-header-contents-border-bottom: rgb(255 255 255 / 5%);

    --color-background-success-solid-action-button: var(--hs-green);
    --color-background-danger-solid-action-button: var(--hs-red);
    --color-background-warning-solid-action-button: var(--hs-amber);
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
        --color-background: var(--hs-dark-canvas);
        --color-background-navbar: var(--hs-dark-surface);
        --color-background-stream-message-content: var(--hs-dark-surface);
        --color-background-widget: var(--hs-dark-raised);
        --color-compose-box-background: var(--hs-dark-raised);
        --color-compose-message-content-background: var(--hs-dark-canvas);
        --color-compose-recipient-box-background-color: var(--hs-dark-canvas);

        --color-text-default: var(--hs-dark-ink);
        --color-text-message-default: var(--hs-dark-ink);
        --color-text-sender-name: #ffffff;
        --color-text-generic-link: var(--hs-purple-200);
        --color-text-generic-link-interactive: var(--hs-purple-100);
        --color-markdown-link: var(--hs-purple-200);
        --color-markdown-link-hover: var(--hs-purple-100);
        --color-text-url: var(--hs-purple-200);
        --color-text-url-hover: var(--hs-purple-100);

        --color-background-brand-solid-action-button: var(--hs-brand-hover);
        --color-background-brand-solid-action-button-hover: var(--hs-purple-400);
        --color-background-brand-solid-action-button-active: var(--hs-purple-700);
        --color-compose-send-button-background: var(--hs-brand-hover);
        --color-compose-send-button-background-interactive: var(--hs-purple-400);
        --color-background-animated-button-hover: var(--hs-purple-400);
        --color-text-brand-icon-button: var(--hs-purple-default);
        --color-text-brand-icon-button-hover: var(--hs-purple-200);
        --color-text-brand-text-action-button: var(--hs-purple-default);
        --color-text-brand-subtle-action-button: var(--hs-purple-default);

        --color-background-active-narrow-filter: var(--hs-dark-raised);
        --color-background-hover-narrow-filter: var(--hs-dark-surface);
        --color-background-navigation-item-hover: rgb(157 140 255 / 12%);
        --color-background-sidebar-action-hover: var(--hs-dark-raised);
        --color-left-sidebar-navigation-icon: var(--hs-purple-default);
        --color-left-sidebar-dm-partners-icon: var(--hs-purple-300);
        --color-outline-focus: var(--hs-purple-400);
        --color-compose-focus-ring: var(--hs-purple-400);

        --color-background-unread-counter-prominent: var(--hs-purple-400);
        --color-background-unread-counter-normal: rgb(157 140 255 / 28%);
        --color-background-unread-counter-dot: var(--hs-purple-400);
        --color-border-unread-counter: transparent;
        --color-masked-unread-marker: var(--hs-purple-600);

        --color-border-sidebar: var(--hs-dark-border);
        --color-message-header-contents-border: rgb(255 255 255 / 7%);
        --color-message-header-contents-border-bottom: rgb(255 255 255 / 5%);

        --color-background-success-solid-action-button: var(--hs-green);
        --color-background-danger-solid-action-button: var(--hs-red);
        --color-background-warning-solid-action-button: var(--hs-amber);
    }
}

/* --------------------------------------------------------------------------
   6. Radius
   Enumerated rather than applied with `*`, which would turn avatars and status
   dots into squircles.
   -------------------------------------------------------------------------- */
.action-button,
.icon-button,
.dropdown-widget-button,
.tab-picker,
.tab-picker .slider,
.message_reactions .message_reaction,
.message_reactions .reaction_button,
.main-view-banner,
.main-view-banner .main-view-banner-action-button,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select,
.settings_text_input,
.settings_url_input,
.modal-textarea,
.settings-textarea,
#searchbox .search-input,
#left-sidebar-search input,
.pill-container {
    border-radius: var(--hs-radius-sm);
}

.modal__container,
.popover-menu,
[data-tippy-root] .tippy-box:not([data-theme]),
#compose-content,
.message-header-contents,
.recipient_row .message_header,
#inbox-list,
#recent_view .table_fix_head {
    border-radius: var(--hs-radius-md);
}

/* --------------------------------------------------------------------------
   7. Wordmark
   The navbar logo is a plain <img>, so `content` swaps the pixels without
   touching the markup. This is the CSS stand-in for Zulip's own organisation
   logo setting (Settings > Organization profile) — upload the wordmark there
   and this rule becomes redundant.
   -------------------------------------------------------------------------- */
#realm-navbar-wide-logo {
    content: url("/local-static/harbour-space.svg");
    height: 15px;
    width: auto;
}

.dark-theme #realm-navbar-wide-logo {
    content: url("/local-static/harbour-space-white.svg");
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic #realm-navbar-wide-logo {
        content: url("/local-static/harbour-space-white.svg");
    }
}

/* --------------------------------------------------------------------------
   8. Portico (login, signup, password reset, error pages)
   First impression, and — unlike the app — a surface with a small, well-named
   set of custom properties of its own (--color-action-button, --color-link,
   --color-link-portico-auth, --color-footer-background, --color-links). Driving
   those covers most of the page; the literal overrides that follow are only for
   values Zulip hardcodes.

   The portico has no dark mode upstream: it renders the same white page
   whatever the OS asks for. The prefers-color-scheme block at the end is
   therefore new behaviour, not a re-colouring, and it is written entirely in
   literals because there are no variables to lean on.
   -------------------------------------------------------------------------- */
:root {
    --color-action-button: var(--hs-purple-700);
    --color-action-button-hover: var(--hs-purple-600);
    --color-action-button-active: var(--hs-purple-800);
    --color-action-button-subtle-hover: var(--hs-purple-50);
    --color-action-button-subtle-active: var(--hs-purple-100);

    --color-link: var(--hs-link);
    --color-link-hover: var(--hs-link-hover);
    --color-link-portico-auth: var(--hs-link);
    --color-link-portico-auth-hover: var(--hs-link-hover);
    --color-link-underline: rgb(82 57 150 / 30%);
    --color-link-underline-hover: var(--hs-link-hover);

    --color-footer-background: var(--hs-purple-900);
    --color-links: var(--hs-purple-200);
}

.portico-container {
    background-color: #f4f3f8;
}

.portico-header,
.portico-container.help .header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--hs-border);
    box-shadow: none;
}

/* Same idea as the navbar wordmark, but the portico logo is an inline <svg>,
   which `content` cannot replace — so hide it and paint the anchor instead. */
.portico-header .brand.logo a {
    display: inline-block;
    width: 190px;
    height: 24px;
    background: url("/local-static/harbour-space.svg") left center / contain
        no-repeat;
}

.portico-header .brand.logo a > svg {
    display: none;
}

.portico-header .top-links a {
    color: var(--hs-ink);
}

.portico-header .top-links a:hover {
    color: var(--hs-purple-700);
}

.login-page .lead h1,
.portico-page .lead h1,
.get-started {
    color: var(--hs-ink);
    font-weight: 300;
    letter-spacing: -0.02em;
}

.white-box,
.app-main.login-page-container {
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-lg);
    box-shadow: 0 1px 2px rgb(36 36 36 / 4%), 0 8px 24px rgb(36 36 36 / 5%);
}

/* Specificity has to match Zulip's own attribute-selector list, or the stock
   4px radius and grey border win. */
.new-style .input-box input[type="email"],
.new-style .input-box input[type="number"],
.new-style .input-box input[type="password"],
.new-style .input-box input[type="text"],
.new-style .input-box input[type="url"],
.new-style .input-box select,
.new-style .input-box textarea {
    border-radius: var(--hs-radius-sm);
    border-color: #d9d6e2;
}

.new-style .input-box input[type="email"]:focus,
.new-style .input-box input[type="number"]:focus,
.new-style .input-box input[type="password"]:focus,
.new-style .input-box input[type="text"]:focus,
.new-style .input-box input[type="url"]:focus,
.new-style .input-box select:not(.does-not-exist):focus,
.new-style .input-box textarea:not(.does-not-exist):focus {
    border-color: var(--hs-purple-500);
    box-shadow: 0 0 0 3px rgb(109 44 243 / 18%);
    outline: 0;
}

/* The buttons already follow --color-action-button; only shape and weight are
   left to say. */
.new-style button,
.new-style .button {
    border-radius: var(--hs-radius-sm);
    font-weight: 500;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-action-button: var(--hs-brand-hover);
        --color-action-button-hover: var(--hs-purple-400);
        --color-action-button-active: var(--hs-purple-700);
        --color-action-button-subtle-hover: rgb(157 140 255 / 12%);
        --color-action-button-subtle-active: rgb(157 140 255 / 20%);

        --color-link: var(--hs-purple-200);
        --color-link-hover: var(--hs-purple-100);
        --color-link-portico-auth: var(--hs-purple-200);
        --color-link-portico-auth-hover: var(--hs-purple-100);
        --color-link-underline: rgb(193 180 255 / 30%);
        --color-link-underline-hover: var(--hs-purple-100);

        --color-footer-background: var(--hs-dark-surface);
        --color-links: var(--hs-purple-200);
    }

    .portico-container {
        background-color: var(--hs-dark-canvas);
    }

    .portico-header,
    .portico-container.help .header {
        background-color: var(--hs-dark-surface);
        border-bottom-color: var(--hs-dark-border);
    }

    .portico-header .brand.logo a {
        background-image: url("/local-static/harbour-space-white.svg");
    }

    .portico-header .top-links a {
        color: var(--hs-dark-ink);
    }

    .portico-header .top-links a:hover {
        color: var(--hs-purple-default);
    }

    body,
    .login-page .lead h1,
    .portico-page .lead h1,
    .get-started,
    .split-view .org-header .organization-name,
    .portico-page .description p,
    .contact-admin .invite-hint {
        color: var(--hs-dark-ink);
    }

    .white-box,
    .app-main.login-page-container {
        background-color: var(--hs-dark-surface);
        border-color: var(--hs-dark-border);
        box-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
    }

    .split-view .left-side {
        border-right-color: var(--hs-dark-border);
    }

    .split-view .left-side + .right-side {
        border-left-color: var(--hs-dark-border);
    }

    .split-view .org-header .organization-path {
        color: #a49dba;
    }

    /* The "OR" rule is drawn as a border behind the word, with the word given
       an opaque background to punch a hole in it. That background has to follow
       the card, or it shows up as a white sticker. */
    .portico-page .or {
        color: #a49dba;
    }

    .portico-page .or::before {
        border-bottom-color: var(--hs-dark-border);
    }

    .portico-page .or span {
        background-color: var(--hs-dark-surface);
    }

    .new-style .input-box input[type="email"],
    .new-style .input-box input[type="number"],
    .new-style .input-box input[type="password"],
    .new-style .input-box input[type="text"],
    .new-style .input-box input[type="url"],
    .new-style .input-box select,
    .new-style .input-box textarea {
        background-color: var(--hs-dark-canvas);
        border-color: var(--hs-dark-border);
        color: var(--hs-dark-ink);
    }

    .new-style .input-box input[type="email"]:focus + label,
    .new-style .input-box input[type="password"]:focus + label,
    .new-style .input-box input[type="text"]:focus + label,
    .new-style .input-box select:focus + label,
    .new-style .input-box label:not(.altcha-label) {
        color: var(--hs-dark-ink);
    }

    .new-style .password_visibility_toggle {
        color: #a49dba;
    }

    /* Outline variant: the ring already follows --color-action-button, but the
       fill is a hardcoded white. */
    .new-style button.anonymous-access-button {
        background-color: transparent;
        color: var(--hs-purple-200);
    }

    #footer,
    .footer__legal {
        border-top: 1px solid var(--hs-dark-border);
    }
}