/* ============================================================================ Atmos Core AI — LibreChat brand overlay ---------------------------------------------------------------------------- Loaded AFTER LibreChat's own bundle (injected last in ), so these definitions win on cascade order at equal specificity. LibreChat v0.8.7 defines its semantic layer twice: html { ... } light .dark { ... } dark (the class is applied to ) We override the same names in the same shape. `html.dark` is used rather than bare `.dark` so the dark override outranks the base `html` block here regardless of source order within this file. Only the SEMANTIC layer is remapped. LibreChat's raw palette (--gray-*, --green-*, …) is left untouched: those are the primitives its components reference for non-themable things, and rewriting them would recolour scrollbars, code highlighting and status chips in ways nobody asked for. Colour values come from atmos/brand-kit tokens.css (brand-spec §1) and are not invented here. Contrast pairs are the ones the spec already measured. ============================================================================ */ html { /* ---- Atmos brand tokens (brand-kit tokens.css, verbatim) ---- */ --atmos-ink: #402a1e; --atmos-gold: #bfa678; --atmos-cream: #f2dfbb; --atmos-neutral: #f2f2f2; --atmos-gold-deep: #b19767; --atmos-gold-light: #eae6c8; --atmos-gold-mid: #d3c19b; --atmos-gold-edge: #7a6238; --atmos-border: #e3d8be; --atmos-ink-muted: rgba(64, 42, 30, 0.68); --atmos-substrate: #241812; --atmos-substrate-2: #2e1f17; --atmos-focus: #8f7648; /* ---- LibreChat semantic layer → Atmos tokens (LIGHT) ---- */ --presentation: #ffffff; --text-primary: var(--atmos-ink); --text-secondary: var(--atmos-ink-muted); --text-secondary-alt: rgba(64, 42, 30, 0.58); --text-tertiary: rgba(64, 42, 30, 0.5); --ring-primary: var(--atmos-focus); --header-primary: #ffffff; --header-hover: rgba(242, 223, 187, 0.45); --header-button-hover: rgba(242, 223, 187, 0.45); --surface-primary: #ffffff; --surface-primary-alt: var(--atmos-neutral); --surface-primary-contrast: var(--atmos-cream); --surface-secondary: var(--atmos-neutral); --surface-secondary-alt: var(--atmos-cream); --surface-tertiary: var(--atmos-neutral); --surface-tertiary-alt: #ffffff; --surface-dialog: #ffffff; --surface-chat: #ffffff; --surface-active: rgba(242, 223, 187, 0.75); --surface-active-alt: rgba(191, 166, 120, 0.34); --surface-hover: rgba(242, 223, 187, 0.45); --surface-hover-alt: rgba(191, 166, 120, 0.26); /* The send/submit control. Deliberately NOT the signature gold: as a large fill under an espresso label, mid-gold measures 5.7:1 and still reads muddy (brand-spec §4). Gold stays the accent for thin marks — rules, underlines, traces. gold-light under --ink measures 10.6:1. */ --surface-submit: var(--atmos-gold-light); --surface-submit-hover: var(--atmos-gold-mid); --border-light: var(--atmos-border); --border-medium: var(--atmos-border); --border-medium-alt: var(--atmos-border); --border-heavy: var(--atmos-gold); --border-xheavy: var(--atmos-gold-edge); /* shadcn-layer tokens LibreChat also ships (HSL triplets, not hex). */ --background: 0 0% 100%; --foreground: 22 36% 19%; /* --atmos-ink */ --card: 0 0% 100%; --card-foreground: 22 36% 19%; --muted: 45 60% 91%; /* cream-tinted */ --muted-foreground: 22 20% 42%; --accent: 45 60% 91%; --accent-foreground: 22 36% 19%; --border: 43 45% 82%; /* --atmos-border */ --input: 43 45% 82%; --ring: 40 33% 42%; /* --atmos-focus */ } html.dark { /* ---- LibreChat semantic layer → Atmos tokens (DARK) ---- The dark ground is the brand's "circuit board" substrate, not a neutral grey: warm espresso with cream text, per brand-spec. */ --presentation: var(--atmos-substrate); --text-primary: var(--atmos-cream); --text-secondary: rgba(242, 223, 187, 0.65); --text-secondary-alt: rgba(242, 223, 187, 0.55); --text-tertiary: rgba(242, 223, 187, 0.45); --ring-primary: var(--atmos-gold); --header-primary: var(--atmos-substrate-2); --header-hover: rgba(191, 166, 120, 0.14); --header-button-hover: rgba(191, 166, 120, 0.14); --surface-primary: var(--atmos-substrate-2); --surface-primary-alt: var(--atmos-substrate); --surface-primary-contrast: #3a281c; --surface-secondary: #3a281c; --surface-secondary-alt: #3a281c; --surface-tertiary: #3a281c; --surface-tertiary-alt: var(--atmos-substrate-2); --surface-dialog: var(--atmos-substrate-2); --surface-chat: var(--atmos-substrate-2); --surface-active: rgba(191, 166, 120, 0.24); --surface-active-alt: rgba(191, 166, 120, 0.32); --surface-hover: rgba(191, 166, 120, 0.14); --surface-hover-alt: rgba(191, 166, 120, 0.2); /* On the dark substrate the signature gold IS the right submit fill: it is a light tone on a dark ground, which is the contrast direction that works (the muddiness in light mode came from mid-on-dark in the same hue). */ --surface-submit: var(--atmos-gold); --surface-submit-hover: var(--atmos-gold-deep); --border-light: rgba(191, 166, 120, 0.28); --border-medium: rgba(191, 166, 120, 0.28); --border-medium-alt: rgba(191, 166, 120, 0.36); --border-heavy: var(--atmos-gold); --border-xheavy: var(--atmos-cream); --background: 22 34% 11%; --foreground: 43 60% 88%; --card: 22 32% 14%; --card-foreground: 43 60% 88%; --muted: 22 32% 16%; --muted-foreground: 43 30% 70%; --accent: 22 32% 16%; --accent-foreground: 43 60% 88%; --border: 40 30% 30%; --input: 40 30% 30%; --ring: 36 34% 61%; /* --atmos-gold */ } /* ---- Submit control: label + boundary ------------------------------------ LibreChat styles the submit button's ground from --surface-submit but its label from a utility class, which assumes a dark ground. On our light gold the label must be espresso, and the control needs the spec's boundary (gold-edge is a BOUNDARY colour — never a fill, never text). */ button[data-testid='send-button'], .btn-submit { color: var(--atmos-ink) !important; border: 1px solid var(--atmos-gold-edge); } html.dark button[data-testid='send-button'], html.dark .btn-submit { color: var(--atmos-ink) !important; border-color: var(--atmos-gold); } /* ---- Focus visibility ----------------------------------------------------- Keyboard focus must stay perceptible on both grounds; the spec's focus shade is chosen for >=3:1 non-text contrast on bg/surface/cream. */ :focus-visible { outline: 2px solid var(--ring-primary); outline-offset: 2px; } /* ---- Typography ----------------------------------------------------------- Self-hosted only: the reverse proxy ships a CSP that forbids third-party font hosts, and a silently-failed webfont is worse than an honest stack. Montserrat is the brand display face (brand-spec §2); the body stack falls back through faces that actually exist on target machines. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('./fonts/montserrat-variable.woff2') format('woff2-variations'); } :root { --atmos-display: 'Montserrat', 'Avenir Next', 'Century Gothic', 'Futura', sans-serif; } /* Display face for headings and the wordmark only — body text stays on LibreChat's stack, which is tuned for long-form reading. */ h1, h2, h3, .atmos-wordmark { font-family: var(--atmos-display); font-weight: 300; letter-spacing: 0.04em; } .atmos-wordmark { text-transform: uppercase; letter-spacing: 0.16em; }