/* Focus Chat → Zulip 12.1 theme bridge
   Dark is the brand default. Light maps onto Zulip's day / automatic-light scheme.
   Do not hard-code hexes outside the token block. */

@import url("/local-static/focus-chat/tokens.css");

/* ---- Map Focus Chat tokens onto Zulip CSS custom properties ---- */

:root,
html.dark-theme {
  --color-background: var(--fc-canvas);
  --color-background-navbar: var(--fc-ground);
  --color-background-modal: var(--fc-surface);
  --color-background-popover: var(--fc-raised);
  --color-background-popover-menu: var(--fc-raised);
  --color-background-input: var(--fc-raised);
  --color-background-search: var(--fc-raised);
  --color-background-compose-new-message-button: var(--fc-raised);

  --color-border-sidebar: var(--fc-line);
  --color-border-sidebar-subheader: var(--fc-line-soft);
  --color-navbar-bottom-border: var(--fc-line-soft);

  --color-text-sidebar-base: var(--fc-text-secondary);
  --color-text-sidebar-row: var(--fc-text-secondary);
  --color-text-sidebar-heading: var(--fc-text-muted);
  --color-text-message-default: var(--fc-text);
  --color-text-link: var(--fc-flare);
  --color-text-link-active: var(--fc-flare-press);
  --color-text-generic-link-interactive: var(--fc-flare-hover);

  /* Active / selected channel in the left sidebar — primary brand touchpoint */
  --color-background-active-narrow-filter: var(--fc-flare-tint);
  --color-background-hover-narrow-filter: color-mix(in srgb, var(--fc-flare) 8%, var(--fc-canvas));
  --color-text-active-narrow-filter: var(--fc-text);
  --color-unread-marker: var(--fc-flare);
  --color-masked-unread-marker: color-mix(in srgb, var(--fc-flare) 55%, transparent);

  /* Brand buttons / primary actions */
  --color-background-brand-solid-action-button: var(--fc-flare);
  --color-background-brand-solid-action-button-hover: var(--fc-flare-hover);
  --color-background-brand-solid-action-button-active: var(--fc-flare-press);
  --color-background-brand-subtle-action-button: var(--fc-flare-tint);
  --color-background-brand-subtle-action-button-hover: color-mix(in srgb, var(--fc-flare) 22%, transparent);
  --color-background-brand-subtle-action-button-active: color-mix(in srgb, var(--fc-flare) 28%, transparent);

  /* Destructive → oxblood */
  --color-background-danger-solid-action-button: var(--fc-oxblood);
  --color-background-danger-solid-action-button-hover: color-mix(in srgb, var(--fc-oxblood) 88%, white);
  --color-background-danger-solid-action-button-active: color-mix(in srgb, var(--fc-oxblood) 80%, black);

  /* Success / online → green */
  --color-background-success-solid-action-button: var(--fc-green);
  --color-user-circle-active: var(--fc-green);

  /* Mentions / attention → amber tint */
  --color-background-direct-mention: var(--fc-amber-tint);
  --color-background-group-mention: var(--fc-amber-tint);
  --color-background-alert-word: var(--fc-amber-tint);

  /*
   * Zulip 12.1 PostCSS light-dark() polyfill: many rules read
   * --csstools-light-dark-toggle--N instead of --color-*. Keep both in sync.
   * Mapping derived from app.*.css variable definitions.
   */
  --csstools-light-dark-toggle--14: var(--fc-canvas);   /* --color-background */
  --csstools-light-dark-toggle--17: var(--fc-ground);   /* --color-background-navbar */
  --csstools-light-dark-toggle--79: var(--fc-raised);   /* --color-background-popover */
  --csstools-light-dark-toggle--56: var(--fc-raised);   /* --color-background-popover-menu */
  --csstools-light-dark-toggle--500: var(--fc-raised);  /* --color-background-input */
  --csstools-light-dark-toggle--49: var(--fc-raised);   /* --color-background-search */
  --csstools-light-dark-toggle--20: var(--fc-flare-tint); /* --color-background-active-narrow-filter */
  --csstools-light-dark-toggle--21: color-mix(in srgb, var(--fc-flare) 8%, var(--fc-canvas)); /* hover-narrow-filter */
  --csstools-light-dark-toggle--390: var(--fc-flare);   /* brand-solid-action-button */
  --csstools-light-dark-toggle--391: var(--fc-flare-hover);
  --csstools-light-dark-toggle--392: var(--fc-flare-press);
  --csstools-light-dark-toggle--394: var(--fc-flare-tint); /* brand-subtle-action-button */
  --csstools-light-dark-toggle--430: var(--fc-oxblood); /* danger-solid-action-button */
  --csstools-light-dark-toggle--410: var(--fc-green);   /* success-solid-action-button */
  --csstools-light-dark-toggle--300: var(--fc-amber-tint); /* direct-mention */
  --csstools-light-dark-toggle--301: var(--fc-amber-tint); /* group-mention */
  --csstools-light-dark-toggle--80: var(--fc-amber-tint);  /* alert-word */
  --csstools-light-dark-toggle--82: var(--fc-line);     /* --color-border-sidebar */
  --csstools-light-dark-toggle--84: var(--fc-line-soft); /* --color-border-sidebar-subheader */
  --csstools-light-dark-toggle--27: var(--fc-line-soft); /* --color-navbar-bottom-border */
  --csstools-light-dark-toggle--83: var(--fc-text-secondary); /* --color-text-sidebar-base */
  --csstools-light-dark-toggle--18: var(--fc-text-secondary); /* --color-text-sidebar-row */
  --csstools-light-dark-toggle--181: var(--fc-text-muted); /* --color-text-sidebar-heading */
  --csstools-light-dark-toggle--164: var(--fc-text);    /* --color-text-message-default */
  --csstools-light-dark-toggle--198: var(--fc-flare);   /* --color-text-link */
  --csstools-light-dark-toggle--202: var(--fc-flare-press); /* --color-text-link-active */
  --csstools-light-dark-toggle--19: var(--fc-text);     /* --color-text-active-narrow-filter */
  --csstools-light-dark-toggle--203: var(--fc-flare-hover); /* --color-text-generic-link-interactive */
  --csstools-light-dark-toggle--33: color-mix(in srgb, var(--fc-flare) 55%, transparent); /* masked-unread-marker */
  --csstools-light-dark-toggle--265: var(--fc-green);   /* --color-user-circle-active */
}

/* Light theme: Zulip day mode (no .dark-theme). Brand light tokens live on [data-theme=light]
   in tokens.css — re-apply them when Zulip is in light mode. */
html:not(.dark-theme):not(.color-scheme-automatic) {
  --fc-flare: #d3453d;
  --fc-flare-hover: #c03b34;
  --fc-flare-press: #a8322c;
  --fc-oxblood: #7a1c21;
  --fc-amber: #c97a1e;
  --fc-green: #1e8f63;

  --fc-ground: #f3eee7;
  --fc-canvas: #faf7f3;
  --fc-surface: #ffffff;
  --fc-raised: #f6f1ea;
  --fc-line: #e4dcd3;
  --fc-line-soft: #efe8df;

  --fc-text: #1a181b;
  --fc-text-secondary: #3a353b;
  --fc-text-muted: #6e686b;
  --fc-text-faint: #8e888b;

  --fc-flare-tint: rgba(211, 69, 61, 0.1);
  --fc-amber-tint: rgba(201, 122, 30, 0.12);
  --fc-green-tint: rgba(30, 143, 99, 0.1);
}

@media (prefers-color-scheme: light) {
  html.color-scheme-automatic {
    --fc-flare: #d3453d;
    --fc-flare-hover: #c03b34;
    --fc-flare-press: #a8322c;
    --fc-oxblood: #7a1c21;
    --fc-amber: #c97a1e;
    --fc-green: #1e8f63;

    --fc-ground: #f3eee7;
    --fc-canvas: #faf7f3;
    --fc-surface: #ffffff;
    --fc-raised: #f6f1ea;
    --fc-line: #e4dcd3;
    --fc-line-soft: #efe8df;

    --fc-text: #1a181b;
    --fc-text-secondary: #3a353b;
    --fc-text-muted: #6e686b;
    --fc-text-faint: #8e888b;

    --fc-flare-tint: rgba(211, 69, 61, 0.1);
    --fc-amber-tint: rgba(201, 122, 30, 0.12);
    --fc-green-tint: rgba(30, 143, 99, 0.1);
  }
}

/* Extra flare accent on the active sidebar row (left edge) — Zulip's highlight
   is a background tint; this makes the brand unmistakable. */
html.dark-theme .top_left_row.active-filter,
html.dark-theme .active-filter,
.dark-theme #left-sidebar .active-filter,
#left-sidebar .active-filter,
.left-sidebar .active-filter {
  box-shadow: inset 3px 0 0 0 var(--fc-flare);
}

/* ---- Typography ---- */

/* Inter on UI chrome only — leave .message_content / .rendered_markdown alone */
#navbar-fixed-container,
.header,
.top_navbar,
#left-sidebar,
.left-sidebar,
#right-sidebar,
.right-sidebar,
#compose,
.compose-content,
.overlay-content,
.modal,
.modal__container,
.popover,
.dropdown-list-container,
#settings_overlay,
.settings-section,
.pill-container,
button,
.button,
input:not(.message_content input),
select,
textarea:not(.message_content textarea) {
  font-family: var(--fc-font-ui);
}

/* Source Serif 4 — portico / login / splash display headings only */
.portico-page h1,
.portico-landing h1,
.portico-header h1,
.hello-main h1,
.register-account h1,
.flex.justify-center h1,
.get-started-page h1,
.login-page-container h1,
.center-container h1.app-name,
.portico-page .pitch h1,
.portico-page .main-header {
  font-family: var(--fc-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}