/* Managed by ansible (ansible/stack.yml) -- do not edit on the box.
 *
 * PCT digital brand layer for LibreChat. Mounted at /app/client/dist/pct/ and
 * pulled in by the <link> that stack.yml inserts into the image's own
 * index.html, so it is the last stylesheet the browser sees and wins without
 * !important on anything that is not a Tailwind utility.
 *
 * It only redefines LibreChat's CSS custom properties -- the same ones its
 * client/src/style.css declares on `html` (light) and `.dark` -- plus one
 * explicit list of rounded-* utilities. No class internals, no selectors
 * copied out of the bundle, so an image bump cannot break the theme itself.
 *
 * Values come from the PCT digital Design System (Branddesign 2026),
 * tokens/colors.css and tokens/typography.css.
 */

/* --- Hausschrift ---------------------------------------------------------
 * Montserrat is the only typeface in the brand, for print and screen alike.
 * Self-hosted next to this file: nothing is fetched from Google at runtime,
 * which is the whole point of this deployment.
 */

@font-face {
  font-family: 'Montserrat';
  src: url('./montserrat-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('./montserrat-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('./montserrat-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('./montserrat-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Palette ------------------------------------------------------------
 * LibreChat's semantic tokens (--surface-*, --text-*, --border-*) are all
 * declared as var(--gray-N), so re-pointing this one ramp re-skins the light
 * and the dark theme together and keeps their contrast relationships intact.
 * Light end: the brand's cyan-tinted section surfaces. Dark end: navy.
 */

:root {
  --pct-blue: #0092cf;
  --pct-blue-hover: #0079a6;
  --pct-blue-40: #99d3ec;
  --pct-navy: #0e2538;

  --gray-20: #eaf3f8;
  --gray-50: #f5fafc;
  --gray-100: #eaf3f8; /* --pct-bg-light */
  --gray-200: #d7e6ee; /* --pct-border */
  --gray-300: #c3d8e4;
  --gray-400: #9cb7cc; /* --pct-text-muted-light */
  --gray-500: #7b8b9c; /* --pct-text-muted */
  --gray-600: #3a4f5f; /* --pct-text-mid */
  --gray-700: #12384f; /* --pct-wave-navy-to */
  --gray-800: #0e2538; /* --pct-navy */
  --gray-850: #0c1e2e;
  --gray-900: #0a1b29;

  /* LibreChat's own accent, used for links and highlights. */
  --brand-purple: #0092cf;
}

/* Brand accents that are not derived from the ramp. Both themes get the same
 * cyan: the brand has one accent, not a light and a dark one.
 */
html,
html.dark {
  --brand-purple: var(--pct-blue);
  --surface-submit: var(--pct-blue);
  --surface-submit-hover: var(--pct-blue-hover);
  --ring-primary: var(--pct-blue);

  /* shadcn's --primary is deliberately left alone: .text-primary resolves to
   * it and is used all over the UI for ordinary text, so tinting it would
   * turn body copy cyan.
   */
}

/* --- Typografie --------------------------------------------------------- */

html,
body,
button,
input,
select,
textarea,
.font-sans {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Montserrat has no monospace cut; code stays on the shipped mono face. */
code,
kbd,
pre,
samp,
.font-mono {
  font-family: 'Roboto Mono', ui-monospace, monospace;
}

/* --- Kantig ------------------------------------------------------------
 * "Keine abgerundeten Ecken -- alles läuft kantig": buttons, cards, inputs,
 * tags and bubbles are all 0 px in the brand. --radius covers the shadcn
 * components; the Tailwind utilities have to be named. rounded-full is left
 * alone on purpose -- avatars and icon buttons are circles, not squares.
 */

:root {
  --radius: 0;
}

.rounded-sm,
.rounded,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 0 !important;
}

/* --- Fokus -------------------------------------------------------------
 * The brand's focus treatment is a ring in the 40 % cyan tint.
 */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role='button']:focus-visible {
  outline: 3px solid var(--pct-blue-40);
  outline-offset: 1px;
}

/* --- Anmeldeseite --------------------------------------------------------
 * The one part of this file that reaches into LibreChat's markup instead of
 * its custom properties, because the login page is the only screen where
 * the brand has to carry the whole impression on its own.
 *
 * Scoped through four hooks: .w-authPageWidth (a LibreChat class that exists
 * on no other screen, which is what keeps all of this off the chat UI), the
 * openid link's test id, the logo image and the page wrapper. If upstream
 * renames any of them the login page falls back to its stock look -- nothing
 * breaks, it just stops being branded, and the assert in stack.yml cannot
 * warn about that the way it does for index.html.
 */

/* Die Welle: the recurring brand element, here as the footer band of the
 * page. It has to go on the body, because the wrapper paints an opaque
 * background over anything behind it.
 */
body:has(.w-authPageWidth) {
  background-color: var(--surface-primary);
  background-image: url('./wave-band.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}

body:has(.w-authPageWidth) #root > div,
body:has(.w-authPageWidth) .w-authPageWidth {
  background-color: transparent;
}

/* LibreChat pins the logo to 40 px, which leaves the mark smaller than the
 * sign-in button. The capsule can carry the page at this size.
 */
body:has(.w-authPageWidth) div.bg-cover:has(> img[src$='logo.svg']) {
  height: auto;
  margin-top: 3.5rem;
}

body:has(.w-authPageWidth) div.bg-cover:has(> img[src$='logo.svg']) img {
  height: 88px;
}

/* Montserrat runs wide -- the house claim needs more than LibreChat's
 * max-w-md to break after the first sentence rather than mid-phrase.
 */
body:has(.w-authPageWidth) .w-authPageWidth {
  max-width: 32rem;
}

/* "Welcome back" is a localised string with no configuration key, so it is
 * swapped here for the house pattern: two short sentences, both ending in a
 * full stop, the second one set in the accent colour.
 */
.w-authPageWidth h1 {
  /* The string itself is hidden rather than removed: assistive technology
   * still reads it, and the two lines below are what is seen.
   */
  font-size: 0;
  line-height: 0;
  margin-bottom: 2.5rem;
}

.w-authPageWidth h1::before,
.w-authPageWidth h1::after {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.w-authPageWidth h1::before {
  content: 'Gemeinsam digital.';
  color: var(--pct-navy);
}

html.dark .w-authPageWidth h1::before {
  color: #fff;
}

.w-authPageWidth h1::after {
  content: 'Zukunft gestalten.';
  color: var(--pct-blue);
}

/* The only action on the page, so it gets the brand's filled button rather
 * than the outlined default.
 */
a[data-testid='openid'] {
  justify-content: center;
  border-color: var(--pct-blue);
  background-color: var(--pct-blue);
  color: #fff;
  font-weight: 600;
}

a[data-testid='openid']:hover {
  border-color: var(--pct-blue-hover);
  background-color: var(--pct-blue-hover);
}

/* The footer is empty before sign-in -- CUSTOM_FOOTER is part of the config
 * LibreChat only serves to an authenticated session -- so the imprint line
 * goes here. The middle dot is the one unicode character the brand allows
 * as a separator.
 */
body:has(.w-authPageWidth) [role='contentinfo']::after {
  content: 'PCT digital GmbH · Fleethörn 7 · 24103 Kiel · moin@pct-digital.de';
  /* Pinned to the bottom so the line always sits on the wave. Left in the
   * flow it would land on white on a tall viewport, where white on white is
   * no line at all.
   */
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.02em;
}