/*
 * Body and Soil colours for LibreChat v0.8.8.
 * LibreChat reads its colours from custom properties that hold "R G B" triplets.
 * Values below come from data_platform_web/src/styles/tokens.css:
 *   dark green #043529 = 4 53 41        focus green #135f3a = 19 95 58
 *   chart green #237a47 = 35 122 71     yellow #ffd006 = 255 208 6
 *   beige #f9fbec = 249 251 236         divider #e4dbcc = 228 219 204
 *   chart track #eff6f0 = 239 246 240   danger #9b2c1f = 155 44 31
 * Dark mode is left as LibreChat ships it, except the sidebar (see below).
 * Loaded by the patched index.html. Keep both when upgrading LibreChat (brain/README.md).
 */

/* Light mode: white canvas, dark green actions. :root:not(.dark) beats LibreChat's html rule. */
:root:not(.dark) {
  --surface-submit: 4 53 41;
  --surface-submit-hover: 19 95 58;
  --accent-primary: 19 95 58;
  --accent-primary-hover: 4 53 41;
  --link: 19 95 58;
  --link-hover: 4 53 41;
  --ring-primary: 19 95 58;
  --text-primary: 1 1 1;
  --text-destructive: 155 44 31;
  --surface-destructive: 155 44 31;
  --surface-destructive-hover: 120 33 23;
  --status-success: 19 95 58;
  --surface-primary-alt: 249 251 236;
  --surface-secondary: 249 251 236;
  --surface-secondary-alt: 228 219 204;
  --surface-tertiary: 239 246 240;
  --surface-active: 239 246 240;
  --surface-active-alt: 228 219 204;
  --surface-hover: 239 246 240;
  --surface-hover-alt: 228 219 204;
  --surface-composer-hover: 239 246 240;
  --series-4: 19 95 58;
}

/*
 * Sidebar: the icon bar and the chat list are both inside the aside element.
 * On a phone the sidebar is a fixed drawer instead of an aside, so it has the same rule.
 * Both use one dark green, and the border between them is the same green, so there is no seam.
 * Setting the variables here changes only what is inside the sidebar, in light and dark mode.
 * Menus open outside the aside, so they keep the normal colours.
 */
aside,
.fixed.inset-y-0.left-0.flex-col {
  --presentation: 4 53 41;
  --surface-inverted: 255 255 255;
  --surface-inverted-hover: 249 251 236;
  --text-inverted: 4 53 41;
  --surface-primary: 4 53 41;
  --surface-primary-alt: 4 53 41;
  --surface-secondary: 4 53 41;
  --surface-tertiary: 19 95 58;
  --surface-active: 35 122 71;
  --surface-active-alt: 35 122 71;
  --surface-hover: 19 95 58;
  --surface-hover-alt: 19 95 58;
  --surface-composer-hover: 19 95 58;
  --text-primary: 255 255 255;
  --text-secondary: 249 251 236;
  --text-secondary-alt: 249 251 236;
  --text-tertiary: 249 251 236;
  --text-muted: 249 251 236;
  --border-light: 4 53 41;
  --border-medium: 249 251 236;
  --border-medium-alt: 249 251 236;
  --border-heavy: 255 208 6;
  --ring-primary: 255 208 6;
  color: rgb(255 255 255);
}

/* The send button is filled with the text colour, which would be black. Make it brand green. */
:root:not(.dark) #send-button {
  background-color: rgb(4 53 41);
}
:root:not(.dark) #send-button:hover:not(:disabled) {
  background-color: rgb(19 95 58);
}
:root:not(.dark) #send-button:focus-visible {
  outline: 2px solid rgb(19 95 58);
  outline-offset: 3px;
}

/* Light mode: the message box and the sign-in fields get a neutral border that reaches 3:1 on white. */
:root:not(.dark) [class*="bg-surface-chat"][class*="border-border-light"],
:root:not(.dark) input.lc-field,
:root:not(.dark) input.peer {
  border-color: rgb(var(--border-xheavy));
}