/* ==========================================================================
   Laundry Nerd theme — Alliance Laundry Systems colors on stock LibreChat.
   Injected by client/nginx.conf (sub_filter adds a <link> before </head>) and
   served from this repo via a deploy-compose.yml bind mount into
   /app/client/dist/assets/. No source changes; survives image pulls.

   How it works: LibreChat paints its whole UI from the CSS variables declared
   in the bundle's html{}/.dark{} blocks (see client/src/style.css). This file
   loads after the bundle, so its html:root/html.dark blocks win the cascade.
   If upstream ever renames a variable the app falls back to stock colors for
   that token — cosmetic only, nothing can break functionally.

   Brand source: AX24-0026 brand guidelines (Sept 2024) via the ALS design
   tokens. Dark mode is the Alliance Blue hue desaturated to ~35% ("slate
   navy") rather than full-saturation navy.
   ========================================================================== */

/* Typography: the bundle's font-sans stack is ['Inter', sans-serif]. Rather
   than chase every element, redeclare the Inter family name against Open Sans
   variable fonts (mounted next to this file). Latin subset; other scripts
   fall back to the system sans. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/opensans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/opensans-var-italic.woff2') format('woff2');
}

/* ---------- Light ---------- */
html:root {
  --brand-purple: #002854;
  --presentation: #ffffff;
  --text-primary: #002854;
  --text-secondary: #4c5a70;
  --text-secondary-alt: #5c6470;
  --text-tertiary: #7c8490;
  --ring-primary: #5e86b7;
  --header-primary: #ffffff;
  --header-hover: #f7f7f8;
  --header-button-hover: #f7f7f8;
  --surface-active: #eff0f2;
  --surface-active-alt: #e2e3e6;
  --surface-hover: #e2e3e6;
  --surface-hover-alt: #c9cace;
  --surface-primary: #ffffff;
  --surface-primary-alt: #f7f7f8;
  --surface-primary-contrast: #eff0f2;
  --surface-secondary: #f7f7f8;
  --surface-secondary-alt: #e2e3e6;
  --surface-tertiary: #e9f2f9;
  --surface-tertiary-alt: #ffffff;
  --surface-dialog: #ffffff;
  --surface-submit: #002854;
  --surface-submit-hover: #01376f;
  --surface-chat: #ffffff;
  --border-light: #e2e3e6;
  --border-medium-alt: #c9cace;
  --border-medium: #c9cace;
  --border-heavy: #a7a7aa;
  --border-xheavy: #7c8490;

  --background: 0 0% 100%;
  --foreground: 211 100% 16%;
  --card: 0 0% 100%;
  --card-foreground: 211 100% 16%;
  --primary: 211 100% 16%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 5% 97%;
  --secondary-foreground: 211 100% 16%;
  --muted: 240 5% 97%;
  --muted-foreground: 216 6% 53%;
  --accent: 206 53% 94%;
  --accent-foreground: 211 100% 16%;
  --border: 225 7% 89%;
  --input: 225 7% 89%;
  --ring: 213 38% 54%;
  --radius: 0.375rem;
}

/* ---------- Dark: soft slate-navy ---------- */
html.dark {
  --brand-purple: #9cc9e5;
  --presentation: #1c2938;
  --text-primary: #edf3f9;
  --text-secondary: #c6d8ea;
  --text-secondary-alt: #a9c0d8;
  --text-tertiary: #8fabc9;
  --ring-primary: #5e86b7;
  --header-primary: #263850;
  --header-hover: #2e4260;
  --header-button-hover: #263850;
  --surface-active: #364d70;
  --surface-active-alt: #263850;
  --surface-hover: #2e4260;
  --surface-hover-alt: #2e4260;
  --surface-primary: #141d29;
  --surface-primary-alt: #16202e;
  --surface-primary-contrast: #16202e;
  --surface-secondary: #16202e;
  --surface-secondary-alt: #223146;
  --surface-tertiary: #263850;
  --surface-tertiary-alt: #263850;
  --surface-dialog: #182433;
  --surface-submit: #37507d;
  --surface-submit-hover: #43507f;
  --surface-chat: #263850;
  --border-light: #2b3c54;
  --border-medium-alt: #3a4f6e;
  --border-medium: #3a4f6e;
  --border-heavy: #5e86b7;
  --border-xheavy: #8fabc9;

  --background: 212 33% 16%;
  --foreground: 210 33% 95%;
  --card: 215 35% 13%;
  --card-foreground: 210 33% 95%;
  --primary: 203 58% 75%;
  --primary-foreground: 215 35% 13%;
  --secondary: 214 36% 23%;
  --secondary-foreground: 210 33% 95%;
  --muted: 214 36% 23%;
  --muted-foreground: 211 35% 67%;
  --accent: 214 36% 23%;
  --accent-foreground: 210 33% 95%;
  --border: 215 32% 25%;
  --input: 215 32% 25%;
  --ring: 213 38% 54%;
  --radius: 0.375rem;
}

/* Legacy .btn-primary ships hardcoded ChatGPT green */
.btn-primary,
.btn-primary:disabled:hover {
  background-color: #002854;
}
.btn-primary:hover {
  background-color: #01376f;
}
.btn-primary.focus-visible,
.btn-primary:focus-visible {
  --tw-ring-color: #5e86b7;
}
html.dark .btn-primary,
html.dark .btn-primary:disabled:hover {
  background-color: #37507d;
}
html.dark .btn-primary:hover {
  background-color: #43507f;
}

/* Alliance geometry: the brand is square-cornered (2-6px). Flatten the large
   Tailwind radii; circular elements (.rounded-full) are left alone. */
.rounded-3xl,
.rounded-2xl,
.rounded-xl {
  border-radius: 6px;
}
.rounded-lg,
.rounded-md {
  border-radius: 4px;
}

::selection {
  background: #9cc9e5;
  color: #002854;
}