/* The Hooshyar brand in the staff chat, without a fork of LibreChat.
 *
 * LibreChat paints with CSS variables: one per role (`--surface-primary`,
 * `--text-primary`, `--link`, …), each a space-separated RGB triplet that its
 * classes read as `rgb(var(--x) / alpha)`. This file sets those roles from our
 * tokens (`packages/brand/src/tokens.css`), so the chat wears the brand
 * without a rebuild. Its own build-time theme (`REACT_APP_THEME_*`) would need
 * an image of our own: a fork in all but name.
 *
 * Two layers, like tokens.css:
 *  1. `--hy-*`: the brand tokens as triplets, light on `html`, dark on
 *     `html.dark`. A `--hy-*` name that tokens.css also has (`--hy-border` and
 *     `--border`) holds that token's value in the same theme; any other name
 *     holds a value tokens.css has in some theme. tests/chat-theme.test.ts
 *     holds both rules, so a brand change here without tokens.css fails it.
 *  2. The roles: LibreChat's variable names set from layer 1, ONCE for both
 *     themes. They resolve on <html>, where `.dark` sits too, so the dark
 *     values of layer 1 reach every role with no second list.
 * A role not named here keeps LibreChat's neutral grey: the brand has no token
 * for it (a second text grey, a heavy border), and an invented hex would be
 * off-brand.
 *
 * The high-contrast themes are LibreChat's accessibility palettes; every
 * colour rule skips `html.high-contrast`, so a person who chose one keeps it.
 *
 * Corners are square everywhere (brackets only, docs/brand/README.md #4).
 * Most of LibreChat's corners are fixed Tailwind classes, not variables, so a
 * variable cannot reach them: one rule with `!important` does.
 *
 * Code keeps LibreChat's monospace face (Roboto Mono, in its image). The brand
 * sets code in Chivo, but answers carry code that people copy, and columns of
 * code only line up in a fixed-width face.
 *
 * The variable names are LibreChat's own (v0.8.8). An upgrade that renames one
 * leaves that role in LibreChat's colour; nothing breaks. Repeat the check in
 * docs/OPERATIONS.md after each upgrade.
 *
 * docker-compose.yml mounts this file and the brand fonts into LibreChat's
 * assets, and links this file from the page at start.
 */

/* ---- fonts: the brand package's files, mounted beside this file ---------- */

@font-face {
  font-family: Chivo;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("hooshyar-fonts/chivo-latin-wght.woff2") format("woff2");
}

@font-face {
  font-family: Vazirmatn;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("hooshyar-fonts/vazirmatn-wght.woff2") format("woff2");
}

/* Chivo has no Arabic letters, so Farsi in an English page falls through to
 * Vazirmatn. A Farsi page puts Vazirmatn first (`--font-fa` in tokens.css). */
:root {
  --theme-font-family: Chivo, Vazirmatn, ui-sans-serif, system-ui, sans-serif;
}

:root[dir="rtl"] {
  --theme-font-family: Vazirmatn, ui-sans-serif, system-ui, sans-serif;
}

html,
.font-sans {
  font-family: var(--theme-font-family);
}

/* ---- corners: brackets only ---------------------------------------------- */

*,
::before,
::after {
  border-radius: 0 !important;
}

/* ---- layer 1: the brand tokens as RGB triplets ----------------------------- */

html:not(.high-contrast) {
  --hy-background: 245 246 249;
  --hy-foreground: 23 26 32;
  --hy-card: 255 255 255;
  --hy-popover: 255 255 255;
  --hy-primary: 189 90 134;
  /* Hover: the other theme's magenta, a step lighter here. */
  --hy-primary-hover: 206 100 153;
  --hy-secondary: 238 240 244;
  --hy-muted-foreground: 91 98 112;
  --hy-destructive: 214 32 64;
  --hy-success: 18 163 92;
  --hy-warning: 176 125 30;
  --hy-info: 14 143 184;
  --hy-border: 223 226 233;
  --hy-ring: 189 90 134;
  --hy-sidebar: 238 240 244;
  --hy-sidebar-accent: 230 233 240;
  --hy-chart-1: 206 100 153;
  --hy-chart-2: 216 162 92;
  --hy-chart-3: 103 167 155;
  --hy-chart-4: 47 143 184;
  --hy-chart-5: 141 147 160;
  --hy-teal: 103 167 155;
}

html.dark:not(.high-contrast) {
  --hy-background: 18 19 23;
  --hy-foreground: 236 238 242;
  --hy-card: 27 29 35;
  --hy-popover: 34 37 45;
  --hy-primary: 206 100 153;
  /* Hover: the other theme's magenta, a step deeper here. */
  --hy-primary-hover: 189 90 134;
  --hy-secondary: 34 37 45;
  --hy-muted-foreground: 141 147 160;
  --hy-destructive: 255 51 88;
  --hy-success: 22 208 107;
  --hy-warning: 255 194 75;
  --hy-info: 41 214 255;
  --hy-border: 43 47 58;
  --hy-ring: 206 100 153;
  --hy-sidebar: 21 23 28;
  --hy-sidebar-accent: 34 37 45;
  --hy-chart-1: 206 100 153;
  --hy-chart-2: 216 162 92;
  --hy-chart-3: 103 167 155;
  --hy-chart-4: 41 214 255;
  --hy-chart-5: 141 147 160;
  --hy-teal: 103 167 155;
}

/* ---- layer 2: LibreChat's roles, for both themes --------------------------- */

html:not(.high-contrast) {
  /* Grounds: the page, the sidebar, cards and menus, the message box. */
  --presentation: var(--hy-background);
  --surface-primary: var(--hy-background);
  --surface-primary-alt: var(--hy-sidebar);
  --surface-primary-contrast: var(--hy-sidebar);
  --surface-secondary: var(--hy-card);
  --surface-secondary-alt: var(--hy-secondary);
  --surface-tertiary: var(--hy-secondary);
  --surface-tertiary-alt: var(--hy-card);
  --surface-dialog: var(--hy-card);
  --surface-chat: var(--hy-popover);
  --header-primary: var(--hy-card);
  --header-hover: var(--hy-secondary);
  --header-button-hover: var(--hy-secondary);

  /* Hover and the selected item (a conversation in the sidebar). */
  --surface-hover: var(--hy-sidebar-accent);
  --surface-hover-alt: var(--hy-border);
  --surface-composer-hover: var(--hy-sidebar-accent);
  --surface-active: var(--hy-border);
  --surface-active-alt: var(--hy-sidebar-accent);

  /* Magenta leads: the send button, primary actions, focus. */
  --surface-submit: var(--hy-primary);
  --surface-submit-hover: var(--hy-primary-hover);
  --accent-primary: var(--hy-primary);
  --accent-primary-hover: var(--hy-primary-hover);
  --brand-purple: var(--hy-primary);
  --ring-primary: var(--hy-ring);

  /* Teal signals links, visited or not. */
  --link: var(--hy-teal);
  --link-hover: var(--hy-teal);
  --link-visited: var(--hy-teal);

  /* Text. */
  --text-primary: var(--hy-foreground);
  --text-secondary-alt: var(--hy-muted-foreground);
  --text-tertiary: var(--hy-muted-foreground);
  --text-muted: var(--hy-muted-foreground);
  --text-warning: var(--hy-warning);
  --text-destructive: var(--hy-destructive);

  /* Edges. */
  --border-light: var(--hy-border);
  --border-medium: var(--hy-border);
  --border-medium-alt: var(--hy-border);
  --border-destructive: var(--hy-destructive);

  /* Status, never the accents. */
  --surface-destructive: var(--hy-destructive);
  --status-success: var(--hy-success);
  --status-warning: var(--hy-warning);
  --status-error: var(--hy-destructive);
  --status-info: var(--hy-info);

  /* Charts: one hue per measure, in the brand's order. */
  --series-1: var(--hy-chart-1);
  --series-2: var(--hy-chart-2);
  --series-3: var(--hy-chart-3);
  --series-4: var(--hy-chart-4);
  --series-5: var(--hy-chart-5);
}

/* Three places paint with a fixed colour, not a role. The page itself:
 * `.dark body, .dark html { background-color: #212121 }`. */
html:not(.high-contrast),
html:not(.high-contrast) body {
  background-color: rgb(var(--hy-background));
}

/* The sign-in fields: an inset shadow of white or #0d0d0d hides the browser's
 * autofill colour, and it showed as a box darker than the page. */
html:not(.high-contrast) .webkit-dark-styles,
html:not(.high-contrast) .webkit-dark-styles:focus {
  -webkit-box-shadow: inset 0 0 0 50vh rgb(var(--hy-background));
  -webkit-text-fill-color: rgb(var(--hy-foreground));
}

/* The send button, the one primary action of the chat: it is filled with the
 * text colour (`bg-text-primary`). LibreChat finds it by this test id too. */
html:not(.high-contrast) [data-testid="send-button"]:not(:disabled) {
  background-color: rgb(var(--hy-primary));
}

html:not(.high-contrast) [data-testid="send-button"]:not(:disabled):hover {
  background-color: rgb(var(--hy-primary-hover));
}