/* Generated by freescout-theme/scripts/build-brand.py from brand/tokens.json. Do not edit by hand. Zulip selects its dark theme with :root.dark-theme or color-scheme-automatic. */
:root {
  --brand-font: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand-radius-sm: 6px;
  --brand-radius: 10px;
  --brand-gradient: linear-gradient(135deg, #ffd500 0%, #f07d00 55%, #bd1c1c 100%);
  --brand-bg: #ffffff;
  --brand-bg-subtle: #f6f7f9;
  --brand-bg-muted: #eceef2;
  --brand-surface: #ffffff;
  --brand-border: #e2e5ea;
  --brand-border-strong: #c4c9d1;
  --brand-text: #1d1f24;
  --brand-text-muted: #545b66;
  --brand-text-subtle: #5f6672;
  --brand-primary: #472583;
  --brand-primary-hover: #381c69;
  --brand-on-primary: #ffffff;
  --brand-primary-soft: #efe9f8;
  --brand-link: #472583;
  --brand-brand: #ee8d00;
  --brand-success: #0f6b62;
  --brand-success-soft: #e2f4f1;
  --brand-warning: #7a4d00;
  --brand-warning-soft: #fff1d6;
  --brand-danger: #b42318;
  --brand-danger-soft: #fdecea;
  --brand-info-soft: #eaf1fb;
  --brand-note-bg: #fff8e1;
  --brand-note-border: #ecc865;
  --brand-note-label: #7a4d00;
  --brand-sidebar-bg: #f6f7f9;
  --brand-sidebar-hover: #eceef2;
  --brand-sidebar-active-bg: #e9e2f5;
  --brand-sidebar-active-text: #3a1e6b;
  --brand-sidebar-indicator: #472583;
  --brand-avatar-0-bg: #ece5f8;
  --brand-avatar-0-fg: #472583;
  --brand-avatar-1-bg: #dcf2ee;
  --brand-avatar-1-fg: #0d5a52;
  --brand-avatar-2-bg: #fdebd6;
  --brand-avatar-2-fg: #7f4300;
  --brand-avatar-3-bg: #e6e9ee;
  --brand-avatar-3-fg: #3a414d;
  --brand-login-panel: #2a1650;
  --brand-on-login-panel: #ffffff;
  --brand-mailbox-demo: #1d4ed8;
  --brand-mailbox-facturation-demo: #0f766e;
  --brand-mailbox-rh-demo: #b45309;
  --brand-mailbox-recrutement-demo: #9d174d;
}
:root.dark-theme {
  --brand-bg: #131419;
  --brand-bg-subtle: #1a1c22;
  --brand-bg-muted: #23262d;
  --brand-surface: #1a1c22;
  --brand-border: #2d3139;
  --brand-border-strong: #454b55;
  --brand-text: #e9eaee;
  --brand-text-muted: #b0b6bf;
  --brand-text-subtle: #a3a9b3;
  --brand-primary: #b9a2f2;
  --brand-primary-hover: #cbb9f6;
  --brand-on-primary: #1c1036;
  --brand-primary-soft: #2c2342;
  --brand-link: #c6b3f6;
  --brand-brand: #ee8d00;
  --brand-success: #6fd0c4;
  --brand-success-soft: #173430;
  --brand-warning: #f2c46b;
  --brand-warning-soft: #3a2d12;
  --brand-danger: #f4978e;
  --brand-danger-soft: #3d1c19;
  --brand-info-soft: #1c2738;
  --brand-note-bg: #2e2715;
  --brand-note-border: #6b5521;
  --brand-note-label: #f2c46b;
  --brand-sidebar-bg: #17181d;
  --brand-sidebar-hover: #23262d;
  --brand-sidebar-active-bg: #2c2342;
  --brand-sidebar-active-text: #e3d8fb;
  --brand-sidebar-indicator: #b9a2f2;
  --brand-avatar-0-bg: #2e2347;
  --brand-avatar-0-fg: #d9ccf5;
  --brand-avatar-1-bg: #16342f;
  --brand-avatar-1-fg: #a3e3d8;
  --brand-avatar-2-bg: #3b2b15;
  --brand-avatar-2-fg: #f6c784;
  --brand-avatar-3-bg: #282c35;
  --brand-avatar-3-fg: #cdd2db;
  --brand-login-panel: #2a1650;
  --brand-on-login-panel: #ffffff;
  --brand-mailbox-demo: #8fb0ff;
  --brand-mailbox-facturation-demo: #5fd3c4;
  --brand-mailbox-rh-demo: #f0a94a;
  --brand-mailbox-recrutement-demo: #f29ac9;
}
@media (prefers-color-scheme: dark) {
  :root.color-scheme-automatic {
    --brand-bg: #131419;
    --brand-bg-subtle: #1a1c22;
    --brand-bg-muted: #23262d;
    --brand-surface: #1a1c22;
    --brand-border: #2d3139;
    --brand-border-strong: #454b55;
    --brand-text: #e9eaee;
    --brand-text-muted: #b0b6bf;
    --brand-text-subtle: #a3a9b3;
    --brand-primary: #b9a2f2;
    --brand-primary-hover: #cbb9f6;
    --brand-on-primary: #1c1036;
    --brand-primary-soft: #2c2342;
    --brand-link: #c6b3f6;
    --brand-brand: #ee8d00;
    --brand-success: #6fd0c4;
    --brand-success-soft: #173430;
    --brand-warning: #f2c46b;
    --brand-warning-soft: #3a2d12;
    --brand-danger: #f4978e;
    --brand-danger-soft: #3d1c19;
    --brand-info-soft: #1c2738;
    --brand-note-bg: #2e2715;
    --brand-note-border: #6b5521;
    --brand-note-label: #f2c46b;
    --brand-sidebar-bg: #17181d;
    --brand-sidebar-hover: #23262d;
    --brand-sidebar-active-bg: #2c2342;
    --brand-sidebar-active-text: #e3d8fb;
    --brand-sidebar-indicator: #b9a2f2;
    --brand-avatar-0-bg: #2e2347;
    --brand-avatar-0-fg: #d9ccf5;
    --brand-avatar-1-bg: #16342f;
    --brand-avatar-1-fg: #a3e3d8;
    --brand-avatar-2-bg: #3b2b15;
    --brand-avatar-2-fg: #f6c784;
    --brand-avatar-3-bg: #282c35;
    --brand-avatar-3-fg: #cdd2db;
    --brand-login-panel: #2a1650;
    --brand-on-login-panel: #ffffff;
    --brand-mailbox-demo: #8fb0ff;
    --brand-mailbox-facturation-demo: #5fd3c4;
    --brand-mailbox-rh-demo: #f0a94a;
    --brand-mailbox-recrutement-demo: #f29ac9;
  }
}

/* Client charte for Zulip web, loaded after Zulip's bundles (see apply.py). Values come from the --brand-* tokens
   generated by freescout-theme/scripts/build-brand.py (prepended to this file in the image). Only the accent, the
   focus/links, the font and the login page change: Zulip's greys, layout and dark theme stay its own. */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/brand/fonts/noto-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/brand/fonts/noto-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Actions (buttons of the app and of settings) */
  --color-background-brand-solid-action-button: var(--brand-primary);
  --color-background-brand-solid-action-button-hover: var(--brand-primary-hover);
  --color-background-brand-solid-action-button-active: var(--brand-primary-hover);
  --color-text-brand-solid-action-button: var(--brand-on-primary);
  --color-background-brand-subtle-action-button: var(--brand-primary-soft);
  --color-background-brand-subtle-action-button-hover: color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --color-background-brand-subtle-action-button-active: color-mix(in srgb, var(--brand-primary) 26%, transparent);
  --color-text-brand-subtle-action-button: var(--brand-primary);
  --color-text-brand-text-action-button: var(--brand-primary);
  --color-background-brand-text-action-button-hover: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --color-background-brand-text-action-button-active: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --color-text-brand-icon-button: color-mix(in srgb, var(--brand-primary) 75%, transparent);
  --color-text-brand-icon-button-hover: var(--brand-primary);
  --color-text-brand-icon-button-active: var(--brand-primary);
  --color-text-brand-icon-button-square-active: var(--brand-primary);
  --color-background-brand-icon-button-square-hover: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --color-background-brand-icon-button-square-active: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --color-background-brand-banner: var(--brand-primary-soft);
  --color-text-brand-banner: var(--brand-sidebar-active-text);
  --color-border-brand-banner: color-mix(in srgb, var(--brand-primary) 40%, transparent);

  /* Links, focus, selection, unread */
  --color-text-link: var(--brand-link);
  --color-text-link-hover: var(--brand-primary-hover);
  --color-text-link-active: var(--brand-primary-hover);
  --color-text-link-banner: var(--brand-link);
  --color-text-link-decoration: color-mix(in srgb, var(--brand-link) 25%, transparent);
  --color-text-link-decoration-hover: color-mix(in srgb, var(--brand-link) 70%, transparent);
  --color-outline-focus: var(--brand-primary);
  --color-focus-outline-input-pill: var(--brand-primary);
  --color-selected-message-outline: color-mix(in srgb, var(--brand-primary) 60%, transparent);
  --color-unread-marker: var(--brand-primary);
  --color-background-unread-counter-dot: var(--brand-primary);
  --color-background-unread-counter-prominent: var(--brand-primary);
  --color-unread-counter-prominent: var(--brand-on-primary);

  /* Compose box: send button and its controls */
  --color-compose-send-button-background: var(--brand-primary);
  --color-compose-send-button-background-interactive: var(--brand-primary-hover);
  --color-compose-send-button-icon-color: var(--brand-on-primary);
  --color-compose-send-control-button: var(--brand-primary);
  --color-compose-send-control-button-interactive: var(--brand-primary-hover);
  --color-compose-send-control-button-background-interactive: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --color-compose-embedded-button-text-color: var(--brand-primary);
  --color-compose-embedded-button-text-color-hover: var(--brand-primary-hover);
  --color-compose-embedded-button-background-hover: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --color-compose-embedded-button-background-interactive: color-mix(in srgb, var(--brand-primary) 16%, transparent);

  /* Navigation icons and headings */
  --color-navbar-icon: var(--brand-primary);
  --color-icon-purple: var(--brand-primary);
  --color-left-sidebar-navigation-icon: var(--brand-primary);
  --color-left-sidebar-dm-partners-icon: var(--brand-primary);
  --color-text-sidebar-action-heading: var(--brand-primary);
  --color-text-sidebar-action-heading-hover: var(--brand-sidebar-active-text);
  --color-background-sidebar-action-hover: var(--brand-sidebar-active-bg);
  --color-left-sidebar-middle-box-shadow-hover: var(--brand-sidebar-active-bg);

  /* Logged-out pages (login, password reset): their colours are variables of their own */
  --color-action-button: var(--brand-primary);
  --color-action-button-hover: var(--brand-primary-hover);
  --color-action-button-active: var(--brand-primary-hover);
  --color-action-button-subtle-hover: var(--brand-primary-soft);
  --color-action-button-subtle-active: var(--brand-primary-soft);
  --color-link-portico-auth: var(--brand-link);
  --color-link-portico-auth-hover: var(--brand-primary-hover);
  --color-link: var(--brand-link);
}

/* Font: Zulip sets Source Sans 3 on body and on a few elements of its own; same selectors, declared later. */
body,
.new-style button,
.new-style .input-box input[type],
.new-style .input-box select,
.new-style .input-box textarea,
.billing-upgrade-page {
  font-family: var(--brand-font);
}
[data-tippy-root] {
  font-family: var(--brand-font) !important; /* Zulip's own rule is !important. */
}

/* Login page: focus states in the accent, Zulip wordmark replaced by the client mark (the SVG stays readable
   by screen readers, so the link keeps a name). */
.new-style button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 45%, transparent);
}
.new-style .input-box input[type]:focus,
.new-style .input-box select:focus,
.new-style .input-box textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-soft);
}
/* Zulip's own AA misses on this page (axe): footer 4.3:1, password toggle 17 px. */
#footer .footer__legal-container .copyright,
#footer .footer__legal-container .copyright a {
  color: #d9dae6;
}
#footer .footer__legal-container a {
  display: inline-block;
  padding: 4px 0; /* 24 px targets on a phone (WCAG 2.5.8) */
}
.password_visibility_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}
.portico-header .brand-logo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.portico-header .brand.logo a::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  background: url("/static/brand/mark.png") center / contain no-repeat;
}

/* Login card laid out like FreeScout's login (uitheme-login.css): brand panel on the left, with the client
   wordmark instead of the organisation icon, form on the right. Zulip's own rules are inline-block + fixed widths;
   the card becomes a flex row, a column under Zulip's 795 px breakpoint. */
.split-view .login-page-container {
  display: flex;
  width: fit-content; /* sized by its two sides, like Zulip's inline-block card */
  box-sizing: border-box;
  margin: 0 auto; /* the wrapper is wider (its hint text) and left-aligned by Zulip */
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.split-view .login-page-container .left-side,
.split-view .login-page-container .left-side + .right-side {
  display: block;
  position: static;
  box-sizing: border-box;
  flex: none; /* explicit widths below: Firefox sizes fit-content from the content, not from flex-basis */
  margin: 0;
  border: 0;
}
.split-view .login-page-container .left-side {
  width: 420px;
  padding: 40px 32px;
  background: var(--brand-gradient) bottom / 100% 6px no-repeat, var(--brand-login-panel);
  color: var(--brand-on-login-panel);
}
.split-view .login-page-container .right-side {
  width: 388px; /* Zulip's 328 px form + padding */
  padding: 32px 30px;
}
.split-view .login-page-container .org-header::before {
  content: "";
  display: block;
  width: 240px;
  max-width: 100%;
  aspect-ratio: 940 / 400;
  background: url("/static/brand/logo-dark.png") left center / contain no-repeat;
}
.split-view .login-page-container .org-header .avatar {
  display: none;
}
.split-view .login-page-container .org-header .info-box {
  width: 100%;
  margin: 20px 0 0;
}
.split-view .login-page-container .organization-name {
  font-weight: 700;
  white-space: normal; /* Zulip's nowrap would widen the panel to the full name */
}
.split-view .login-page-container .organization-path {
  color: color-mix(in srgb, var(--brand-on-login-panel) 80%, transparent);
}
.split-view .login-page-container .left-side .description {
  margin: 20px 0 0;
}
.split-view .login-page-container .left-side .description a {
  color: inherit;
  text-decoration: underline;
}
@media (width <= 950px) {
  .split-view .login-page-container .left-side {
    width: 340px;
  }
}
@media (width <= 795px) {
  .split-view .login-page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(400px, 100vw); /* Zulip's 400 px card, never wider than the phone (a % here would not cap the card) */
  }
  .split-view .login-page-container .left-side,
  .split-view .login-page-container .right-side {
    width: 100%;
    padding: 24px 20px;
  }
  .split-view .login-page-container .right-side form {
    width: auto; /* Zulip fixes 328 px; the card is narrower than that on a phone */
  }
}