/*
 * Zencargo theme for the chat UI.
 *
 * LibreChat defines a raw palette (--gray-500, --green-700) and then builds
 * semantic tokens on top of it (--text-primary, --surface-submit). Components
 * only ever read the semantic tokens, so remapping the raw palette restyles the
 * whole app, light and dark, without touching a single component. That is why
 * this file overrides roughly twenty values rather than sixty, and why it keeps
 * working when upstream adds new semantic tokens.
 *
 * Brand values are copied from frontend/src/App/styles/tailwind.css, which is
 * the source of truth for the platform. Only the anchors are brand-defined;
 * intermediate grey steps are interpolated between them, because LibreChat
 * needs more steps than the brand palette defines. Anything interpolated is
 * marked, so a designer can correct it without guessing which are which.
 */

:root {
  /* Brand anchors, straight from the platform palette. */
  --zen-navy-light: #d9e3ff;
  --zen-navy-base: #0e177a;
  --zen-navy-dark: #080e49;
  --zen-azure-lightest: #f2faff;
  --zen-azure-lighter: #d9f0ff;
  --zen-azure-light: #8cd1ff;
  --zen-azure-base: #0d97f2;
  --zen-grey-lightest: #f7f7f8;
  --zen-grey-lighter: #e6e7e9;
  --zen-grey-light: #b4b6bb;
  --zen-grey-base: #686b76;
  --zen-grey-dark: #1d2231;
  --zen-green-light: #daf2e7;
  --zen-green-base: #36b37e;
  --zen-green-dark: #007a52;
  --zen-red-light: #ffdfde;
  --zen-red-base: #f07c78;
  --zen-red-dark: #b33532;
  --zen-orange-base: #f79a3e;
  --zen-gold: #d9b600;
  --zen-yellow-base: #fcc838;
}

/*
 * Raw palette remap. Every LibreChat semantic token resolves through these.
 *
 * The selector has to be :root, not html. Upstream declares the raw palette on
 * :root, which is a pseudo-class and so outranks the html type selector no
 * matter which stylesheet loads last. Matching :root makes specificity equal
 * and lets source order decide, which is what puts this file in front.
 */
:root {
  --white: #fff;
  --black: #000;

  --gray-20: var(--zen-grey-lighter);
  --gray-50: var(--zen-grey-lightest);
  --gray-100: var(--zen-grey-lighter);
  --gray-200: #dcdee1; /* interpolated */
  --gray-300: var(--zen-grey-light);
  --gray-400: #9a9ca3; /* interpolated */
  --gray-500: var(--zen-grey-base);
  --gray-600: #4d5160; /* interpolated */
  --gray-700: #2b3040; /* interpolated */
  --gray-800: var(--zen-grey-dark);
  --gray-850: #141a29; /* interpolated */
  --gray-900: var(--zen-navy-dark);

  --green-50: var(--zen-green-light);
  --green-100: var(--zen-green-light);
  --green-200: #b5e6d1; /* interpolated */
  --green-300: #7fd3b0; /* interpolated */
  --green-400: #56c295; /* interpolated */
  --green-500: var(--zen-green-base);
  --green-600: #159b6a; /* interpolated */
  --green-700: var(--zen-green-dark);
  --green-800: #006846; /* interpolated */
  --green-900: #005539; /* interpolated */
  --green-950: #00402b; /* interpolated */

  --red-50: var(--zen-red-light);
  --red-100: var(--zen-red-light);
  --red-200: #ffc4c2; /* interpolated */
  --red-300: #f9a5a2; /* interpolated */
  --red-400: var(--zen-red-base);
  --red-500: #e35f5b; /* interpolated */
  --red-600: #d14b47; /* interpolated */
  --red-700: var(--zen-red-dark);
  --red-800: #992b28; /* interpolated */
  --red-900: #7d211f; /* interpolated */
  --red-950: #5a1615; /* interpolated */

  --amber-400: var(--zen-yellow-base);
  --amber-500: var(--zen-gold);
  --amber-600: var(--zen-orange-base);

  /* LibreChat's own accent. Navy is the platform's primary. */
  --brand-purple: var(--zen-navy-base);
}

/*
 * Semantic overrides, kept deliberately few: only where the brand disagrees
 * with LibreChat's choice rather than just its shade. These stay on html
 * because that is the selector upstream declares its own semantic tokens on,
 * so specificity ties and source order decides.
 */
html {
  /* Primary action is navy, not green. */
  --surface-submit: var(--zen-navy-base);
  --surface-submit-hover: var(--zen-navy-dark);
  /* Focus rings pick up the bright accent so they read as interactive. */
  --ring-primary: var(--zen-azure-base);
}

.dark {
  /* Dark surfaces sit on navy rather than neutral black, matching the platform. */
  --presentation: var(--zen-navy-dark);
  --surface-submit: var(--zen-azure-base);
  --surface-submit-hover: var(--zen-azure-light);
  --ring-primary: var(--zen-azure-light);
}

/*
 * Hide the About panel in settings, which reports the upstream version, commit
 * and build date and invites the reader to file an issue with its maintainers.
 * There is no configuration option for it: it is a fixed entry in the settings
 * registry, so this is the only way to remove it without patching app source.
 *
 * The settings tabs are Radix, which ids each trigger and panel as
 * `<generated>-trigger-<value>` and `<generated>-content-<value>`. Only the
 * generated prefix varies between renders, so a suffix match is stable. The tab
 * value comes from the SettingsTabValues enum, where ABOUT is 'about'.
 *
 * VERIFY ON UPGRADE. This depends on two upstream details that no contract
 * guarantees: the tab keeping the value 'about', and the tabs staying on Radix
 * with that id format. If either changes the selector silently stops matching
 * and the panel reappears. Open settings after a version bump and check.
 */
[id$='-trigger-about'],
[id$='-content-about'] {
  display: none !important;
}

/*
 * Typography. Font family is not a LibreChat variable, so it is set directly.
 * Lato and Courier Prime match the platform. The webfonts themselves are
 * requested by preconnect and link tags injected into head at build time, the
 * way the platform does it; an @import here would serialise a second round trip
 * behind this file before any text could paint.
 */
html,
body,
input,
textarea,
button,
select {
  font-family: Lato, sans-serif;
}

code,
pre,
kbd,
samp {
  font-family: 'Courier Prime', monospace;
}