/*
 * HACC SPH theme override for LibreChat (ORG-LLM-1, ClickUp 86bb05ub8).
 *
 * Token provenance: HACC `src/theme/theme.ts` — the §4 SPH lock
 * (re-locked 2026-06-23). Values are copied, not invented; if theme.ts
 * changes, this file is updated to match. Do NOT add colors that have
 * no HACC token counterpart.
 *
 * Mechanism: LibreChat defines its entire palette as CSS custom
 * properties on `html {}` (light) and `.dark {}` in the built bundle
 * (client/src/style.css upstream). This stylesheet is loaded AFTER the
 * bundle, so equal-specificity redefinitions win by cascade order. No
 * LibreChat source is modified and no image rebuild is required — see
 * docs/theming.md for the delivery mechanism.
 */

html {
  /* Signature accent — SPH cyan replaces LibreChat brand purple. */
  --brand-purple: #00a1df; /* brand.accent */

  /* Text — deep slate anchor + cool neutrals. */
  --text-primary: #22313a; /* brand.primary */
  --text-secondary: #334155; /* neutral.700 */
  --text-secondary-alt: #7d868c; /* neutral.muted */
  --text-tertiary: #7d868c; /* neutral.muted */
  --text-warning: #d97706; /* status warn solid */
  --text-destructive: #dc2626; /* status error solid */

  /* Focus ring — brand accent. */
  --ring-primary: #00a1df; /* brand.accent */

  /* Surfaces — white canvas, off-white zoning, cyan-tint active states
   * (mirrors nav.rowHover / nav.rowActiveBg in the control center). */
  --header-primary: #ffffff; /* surface.primary */
  --header-hover: #f7f9fb; /* surface.neutral */
  --header-button-hover: #f7f9fb; /* surface.neutral */
  --surface-active: #e3f3fb; /* brand.accentSoft */
  --surface-active-alt: #bde6f5; /* status info border */
  --surface-hover: #eaf7fc; /* status info surface */
  --surface-hover-alt: #bde6f5; /* status info border */
  --surface-primary: #ffffff; /* surface.primary */
  --surface-primary-alt: #f7f9fb; /* surface.neutral */
  --surface-primary-contrast: #eff7fc; /* surface.accent */
  --surface-secondary: #f7f9fb; /* surface.neutral */
  --surface-secondary-alt: #e3f3fb; /* brand.accentSoft */
  --surface-tertiary: #f7f9fb; /* surface.neutral */
  --surface-tertiary-alt: #ffffff; /* surface.primary */
  --surface-dialog: #ffffff; /* surface.primary */
  --surface-chat: #ffffff; /* surface.primary */

  /* Send/submit — the HACC black-pill primary-CTA signature. */
  --surface-submit: #0a0a0a; /* brand.ink */
  --surface-submit-hover: #1f2937; /* brand.inkHover */

  --surface-destructive: #dc2626; /* status error solid */
  --surface-destructive-hover: #b91c1c;

  /* Borders — neutral scale aligned to HACC border.default family. */
  --border-light: #e2e8f0; /* neutral.200 (border.default) */
  --border-medium-alt: #cbd5e1; /* neutral.300 */
  --border-medium: #cbd5e1; /* neutral.300 */
  --border-heavy: #94a3b8; /* neutral.400 */
  --border-xheavy: #64748b; /* neutral.500 */
}

/* Dark mode keeps LibreChat's stock dark surfaces (the SPH lock is a
 * light-first identity; a dark SPH surface system is not defined in
 * theme.ts). Only the accent identity carries over so links, focus and
 * the submit action still read as SPH cyan rather than purple/green. */
.dark {
  --brand-purple: #00a1df; /* brand.accent */
  --ring-primary: #00a1df; /* brand.accent */
  --surface-submit: #0089bd; /* brand.accentStrong — black pill is
                                invisible on dark; deep cyan carries
                                the accent identity instead. */
  --surface-submit-hover: #00a1df; /* brand.accent */
}

/* Auth-page links ("Sign up" / "Login") use Tailwind green utility
 * classes rather than theme variables, so they need a targeted
 * override. Base is accentStrong #0089BD (AA on white per the §4
 * nav.rowActiveFg precedent); hover/focus lift to brand accent with a
 * visible underline as the non-color cue. Element+class+pseudo beats
 * the hover:/focus: utility specificity. */
a.text-green-600,
a.text-green-500 {
  color: #0089bd; /* brand.accentStrong */
}
a.text-green-600:hover,
a.text-green-600:focus,
a.text-green-500:hover,
a.text-green-500:focus {
  color: #00a1df; /* brand.accent */
  text-decoration-color: #00a1df;
}
.dark a.text-green-500,
.dark a.text-green-400 {
  color: #00a1df; /* brand.accent — on dark surfaces */
}

/* Send button — the composer's send control uses `bg-text-primary`
 * rather than --surface-submit in current LibreChat builds, so it
 * inherits slate instead of the black-pill signature. Target it
 * directly (en locale aria-label; re-check on image bump). */
button[aria-label="Send message"] {
  background-color: #0a0a0a; /* brand.ink */
}
button[aria-label="Send message"]:hover:not(:disabled) {
  background-color: #1f2937; /* brand.inkHover */
}
.dark button[aria-label="Send message"] {
  background-color: #0089bd; /* brand.accentStrong — ink is invisible
                                on dark surfaces */
}
.dark button[aria-label="Send message"]:hover:not(:disabled) {
  background-color: #00a1df; /* brand.accent */
}

/* Sidebar color zoning — echoes the Command Center AppShell (§4):
 * the narrow icon rail takes the green-tinted brand-mark band
 * treatment (#EEF7E2 bg + #DBE9C3 border — the sanctioned AppShell
 * literals), and the wider nav panel takes the surface.accent cyan
 * wash, so the shell reads green rail → cyan panel → white chat pane.
 * Both LibreChat bars ship as `bg-surface-primary-alt`; the rail is
 * distinguished by its `border-r` class (DOM-verified 2026-07-19;
 * re-check on image bump). Light mode only — dark keeps stock. */
aside div.border-r.bg-surface-primary-alt {
  background-color: #eef7e2; /* AppShell brand-band green tint */
  border-color: #dbe9c3; /* AppShell brand-band border */
}
nav.bg-surface-primary-alt {
  background-color: #eff7fc; /* surface.accent */
}
.dark aside div.border-r.bg-surface-primary-alt,
.dark nav.bg-surface-primary-alt {
  background-color: var(--surface-primary-alt);
  border-color: var(--border-light);
}

/* The blue→white vignette is painted as the BASE CANVAS (html
 * background), not an overlay — opaque surfaces (sidebars, cards,
 * composer, dialogs) sit on top and are never washed out. The main
 * pane's `bg-presentation` is made transparent in light mode so the
 * canvas shows through. */
html:not(.dark) {
  background-color: #ffffff;
}
html:not(.dark) body {
  background: transparent;
}
/* The blue field is painted on the MAIN PANE's own container
 * (`bg-presentation`), not the viewport — so its geometry is the chat
 * pane's box: the transition starts at the sidebars' right edge, the
 * light center sits at the pane's true center, and it adapts when the
 * sidebar collapses. Deeper cyan at the pane edges easing to a very
 * light blue center (brand-family stops: accentSoft #E3F3FB,
 * info-border #BDE6F5). LibreChat nests two `bg-presentation`
 * containers; the outer (`grow`) carries the field, the inner
 * (`flex-1`) goes transparent so the field isn't double-painted. */
html:not(.dark) .bg-presentation {
  background-color: #ffffff;
  background-image:
    radial-gradient(
      125% 125% at 50% 50%,
      #f7fcfe 0%,
      #e3f3fb 35%,
      #bde6f5 65%,
      #7cccec 100%
    );
}
html:not(.dark) .bg-presentation .bg-presentation {
  background: transparent;
}

/* Typography — Inter is the locked HACC UI face (§4). LibreChat ships
 * its own webfonts; this stack prefers Inter where available (system
 * install or later @font-face bundling) and degrades gracefully. */
html,
body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}