/* Jinemi AI Hub — LibreChat brand theme (deploy/ai/librechat/brand/custom.css)
 *
 * Served as /jinemi-brand.css from the pinned UPSTREAM LibreChat image. It is
 * mounted as a Swarm config straight into /app/client/dist/ and linked from
 * index.html by the brand entrypoint (lc-brand-entrypoint), so it loads
 * AFTER the bundled stylesheet: every override here wins at equal specificity
 * by load order, and html.dark also outranks the stock .dark block outright.
 *
 * WHY A STYLESHEET AND NOT THE THEME SYSTEM: LibreChat's ThemeDefinition/
 * REACT_APP_THEME_* channels are CLIENT BUILD-TIME features — the upstream
 * image ships its defaults baked in, and its theme system only writes inline
 * styles when a deployment theme is actually provided (it is not here). The
 * stock app therefore colors everything from the CSS cascade (html{} light,
 * .dark{} dark), which is exactly what this file overrides. No fork, no
 * custom image; removing the config mount reverts the whole theme.
 *
 * COLOUR IS SET BY THE BRAND BOOK (draft v0.2, 2026-08-18) as implemented on
 * jinemi.com (website/public/style.css): coral #ee6c4d, ink #241d18,
 * paper #faf6f0, night #1c1714. The website's own contrast notes carry over:
 *
 *   * brand coral is THE accent, never recolored — on night it measures
 *     5.83:1 and is used directly (dark links, dark accent, brand-purple).
 *   * on paper, coral fails at 2.83:1, so TEXT-on-paper and FILLED-BUTTON
 *     surfaces that carry white text use the book's text-safe coral
 *     #b5432a (5.13:1 on paper, and white-on-#b5432a is 5.53:1 in BOTH
 *     modes — the stock text-on-status is white, so the submit surface
 *     must be the darkened value in both).
 *
 * THERMOGRAPH ORANGE (#f0803c) MUST NOT APPEAR HERE, same rule as the site.
 * The stock categorical series scale is left upstream: it is CVD-audited
 * against LibreChat's own surfaces and data colours are not brand surfaces.
 *
 * Fonts: IBM Plex Sans (UI) + IBM Plex Mono (code) — the same families
 * jinemi.com loads, so the chat surface reads like the brand. Loaded from
 * Google Fonts exactly as the site does; if the CDN is unreachable the
 * fallback stacks keep everything legible. Archivo (the site's display
 * face) is deliberately NOT loaded: the chat UI has no display headings.
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

/* ---- shared: fonts -------------------------------------------------------- */
/* .font-theme-ui reads this via var(--theme-font-family, Inter, sans-serif). */
html {
	--theme-font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.font-mono,
pre,
code {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- light: paper and ink -------------------------------------------------- */
/* Every channel is a bare R G B triplet — the Tailwind color map wraps it as
 * rgb(var(--token) / <alpha>), same format the stock stylesheet uses. */
html {
	/* text */
	--text-primary: 36 29 24;          /* ink #241d18 */
	--text-secondary: 111 100 89;      /* muted #6f6459 — the site's darkened warm grey, 5.35:1 */
	--text-secondary-alt: 111 100 89;
	--text-tertiary: 111 100 89;
	--shimmer-base: 36 29 24;
	--shimmer-dip: 111 100 89;
	--text-inverted: 250 246 240;      /* paper — inverse ink */

	/* links + accents: the text-safe coral; coral on paper is 2.83:1 */
	--link: 181 67 42;                 /* #b5432a */
	--link-hover: 143 53 32;           /* #8f3520 */
	--link-visited: 111 100 89;
	--accent-primary: 181 67 42;
	--accent-primary-hover: 143 53 32;
	--ring-primary: 238 108 77;        /* brand coral — focus rings are decorative */

	/* header: paper masthead, like the site */
	--header-primary: 250 246 240;
	--header-hover: 242 236 228;
	--header-button-hover: 242 236 228;

	/* surfaces: paper ground, warm panels (#f2ece4), white cards */
	--surface-primary: 250 246 240;    /* paper #faf6f0 */
	--surface-primary-alt: 242 236 228;
	--surface-primary-contrast: 242 236 228;
	--surface-chat: 250 246 240;
	--surface-secondary: 242 236 228;
	--surface-secondary-alt: 242 236 228;
	--surface-tertiary: 242 236 228;
	--surface-tertiary-alt: 255 255 255;
	--surface-dialog: 255 255 255;
	--surface-code: 242 236 228;       /* warm code blocks on the paper ground */
	--surface-active: 242 236 228;
	--surface-active-alt: 231 221 210;
	--surface-hover: 242 236 228;
	--surface-hover-alt: 231 221 210;
	--surface-composer-hover: 242 236 228;
	--surface-overlay: 28 23 20;       /* night scrim — warm, not grey */
	--surface-inverted: 28 23 20;      /* night */
	--surface-inverted-hover: 44 36 32;
	--surface-fixed: 255 255 255;
	--surface-fixed-hover: 242 236 228;
	--text-fixed: 36 29 24;
	/* submit: the text-safe coral — white text needs >= 4.5:1, brand coral
	 * gives 3.06, #b5432a gives 5.53. Kept in dark mode too (see header). */
	--surface-submit: 181 67 42;
	--surface-submit-hover: 143 53 32;

	/* borders */
	--border-light: 231 221 210;       /* #e7ddd2 */
	--border-medium: 211 196 180;      /* #d3c4b4 */
	--border-medium-alt: 211 196 180;
	--border-heavy: 168 155 143;       /* #a89b8f */
	--border-xheavy: 111 100 89;

	/* brand accent */
	--brand-purple: 238 108 77;        /* brand coral #ee6c4d — the accent slot */

	/* status + series colors stay UPSTREAM: they are semantic and
	 * contrast-tuned by LibreChat; the brand book does not redefine them. */
}

/* ---- dark: night ground ---------------------------------------------------- */
html.dark {
	--text-primary: 250 246 240;       /* paper */
	--text-secondary: 168 155 143;     /* #a89b8f — the book's muted, unchanged on dark */
	--text-secondary-alt: 168 155 143;
	--text-tertiary: 168 155 143;
	--shimmer-base: 250 246 240;
	--shimmer-dip: 168 155 143;
	--text-inverted: 36 29 24;

	/* brand coral is legible on night (5.83:1) — used as-is */
	--link: 238 108 77;
	--link-hover: 244 132 99;
	--link-visited: 168 155 143;
	--accent-primary: 238 108 77;
	--accent-primary-hover: 244 132 99;
	--ring-primary: 238 108 77;

	--header-primary: 28 23 20;        /* night #1c1714 */
	--header-hover: 44 36 32;
	--header-button-hover: 28 23 20;

	/* night ground, panels step up through ink (#241d18) and #2c2420 */
	--surface-primary: 28 23 20;
	--surface-primary-alt: 36 29 24;
	--surface-primary-contrast: 36 29 24;
	--surface-chat: 28 23 20;
	--surface-secondary: 36 29 24;
	--surface-secondary-alt: 36 29 24;
	--surface-tertiary: 44 36 32;
	--surface-tertiary-alt: 44 36 32;
	--surface-dialog: 36 29 24;
	--surface-code: 44 36 32;          /* warm code blocks on night */
	--surface-active: 44 36 32;
	--surface-active-alt: 58 48 42;
	--surface-hover: 44 36 32;
	--surface-hover-alt: 58 48 42;
	--surface-composer-hover: 58 48 42;
	--surface-overlay: 0 0 0;
	--surface-inverted: 250 246 240;   /* paper inverted */
	--surface-inverted-hover: 242 236 228;
	--surface-fixed: 255 255 255;
	--surface-fixed-hover: 242 236 228;
	--text-fixed: 36 29 24;            /* same in both modes, per the stock theme */
	/* submit stays the text-safe coral: white text on brand coral is 3.06:1 */
	--surface-submit: 181 67 42;
	--surface-submit-hover: 143 53 32;

	--border-light: 58 48 42;          /* #3a302a */
	--border-medium: 79 66 57;         /* #4f4239 */
	--border-medium-alt: 79 66 57;
	--border-heavy: 111 100 89;        /* heavier = more visible on dark */
	--border-xheavy: 168 155 143;

	--brand-purple: 238 108 77;
}