/* ============================================================================
 * Fractal brand theme overlay — LibreChat Tier-2 (work-3 §4h).
 *
 * Injected by Dockerfile.fractal via a <link> in /app/client/dist/index.html.
 * Only redeclare CSS custom properties already defined by LibreChat — DO NOT
 * add new selectors or component overrides (those would be a Tier-3 source
 * patch, which we want to avoid so upstream tag bumps stay clean).
 *
 * Brand rule (per global fractal-brand guidelines):
 *   Dark button on light bg.  Teal button on dark bg.  Never swap.
 *
 * Palette:
 *   Lilac     #864DF6   primary brand
 *   Teal      #3CC8A0   action / CTA on dark surfaces
 *   Plum      #35254D   deep brand / CTA on light surfaces
 *   Forest    #275746   accent
 *   Saffron   #F5C845   highlight
 *   Lavender  #F4EEFE   surface tint
 * ========================================================================== */

/* :root — defaults that cascade if no theme class is applied */
:root {
  --brand-purple: #864df6; /* Lilac */
  --primary: 258 91% 63%; /* Lilac in HSL for shadcn tokens */
  --primary-foreground: 0 0% 100%;
  --accent: 162 56% 51%; /* Teal */
  --accent-foreground: 254 36% 22%; /* Plum on Teal */
  --ring: 258 91% 63%; /* focus ring = Lilac */
}

/* Light theme — primary CTA = Plum on light bg (per brand rule) */
.light {
  --brand-purple: #864df6;
  --ring-primary: #864df6;

  --surface-submit: #35254d; /* Plum */
  --surface-submit-hover: #271a3a; /* Plum darker */
  --primary: 258 91% 63%;
  --accent: 162 56% 51%;
  --ring: 258 91% 63%;
}

/* Dark theme — primary CTA = Teal on dark bg (per brand rule) */
.dark {
  --brand-purple: #864df6;
  --ring-primary: #864df6;

  --surface-submit: #3cc8a0; /* Teal */
  --surface-submit-hover: #2fa583; /* Teal darker */
  --primary: 258 91% 63%;
  --accent: 162 56% 51%;
  --ring: 258 91% 63%;
}

/* ---- Auth page logo size --------------------------------------------------
 * Upstream AuthLayout.tsx wraps the logo in `div.mt-6.h-10.w-full.bg-cover`
 * (40px tall) which renders as a tiny mark. Target that exact wrapper via
 * :has() to bump it without touching other h-10 elements. CSS-only — keeps
 * branding in Tier-2, no source patch needed.
 * -------------------------------------------------------------------------- */
div.h-10:has(> img[src*="logo.svg"]) {
  height: 6rem; /* 96px — prominent without dominating; chosen 2026-06-12 */
  margin-top: 3rem; /* mt-12 spacing so it isn't right at the top */
}