/* Kefito theme over LibreChat — same tokens as the approved mockup (City Poké: orange #f39e5e, cream, warm brown dark, Dosis) */
html {
  --brand-purple: #f39e5e;
  --ring-primary: #f39e5e;
  --presentation: #ffffff;
  --text-primary: #211d18;
  --text-secondary: #5e5850;
  --text-secondary-alt: #7f786d;
  --text-tertiary: #7f786d;
  --header-primary: #ffffff;
  --header-hover: #f7f4ee;
  --header-button-hover: #f7f4ee;
  --surface-active: #ece9e2;
  --surface-active-alt: #e3ded4;
  --surface-hover: #ece9e2;
  --surface-hover-alt: #e3ded4;
  --surface-primary: #ffffff;
  --surface-primary-alt: #f7f4ee;
  --surface-primary-contrast: #f7f4ee;
  --surface-secondary: #f7f4ee;
  --surface-secondary-alt: #ece9e2;
  --surface-tertiary: #ece9e2;
  --surface-tertiary-alt: #ffffff;
  --surface-dialog: #ffffff;
  --surface-chat: #ffffff;
  --surface-submit: #f39e5e;
  --surface-submit-hover: #e98a45;
  --border-light: #ece9e2;
  --border-medium: #e0dbd1;
  --border-medium-alt: #e0dbd1;
  --border-heavy: #cfc8bb;
  --border-xheavy: #b9b1a3;
}
html.dark, .dark {
  /* warm the base grays too (login/landing use them directly) */
  --gray-900: #201d18;
  --gray-850: #25211c;
  --gray-800: #292621;
  --gray-700: #332e28;
  --gray-600: #453a2f;
  --presentation: #201d18;
  --text-primary: #f2ede5;
  --text-secondary: #c8c0b4;
  --text-secondary-alt: #a69d90;
  --text-tertiary: #a69d90;
  --header-primary: #292621;
  --header-hover: #332e28;
  --header-button-hover: #332e28;
  --surface-active: #332e28;
  --surface-active-alt: #3b352e;
  --surface-hover: #382f26;
  --surface-hover-alt: #3b352e;
  --surface-primary: #201d18;
  --surface-primary-alt: #292621;
  --surface-primary-contrast: #292621;
  --surface-secondary: #292621;
  --surface-secondary-alt: #292621;
  --surface-tertiary: #332e28;
  --surface-tertiary-alt: #332e28;
  --surface-dialog: #292621;
  --surface-chat: #201d18;
  --surface-submit: #f39e5e;
  --surface-submit-hover: #f6b382;
  --border-light: #382f26;
  --border-medium: #453a2f;
  --border-medium-alt: #453a2f;
  --border-heavy: #54473a;
  --border-xheavy: #665747;
}
html, body, button, input, textarea, select { font-family: "Dosis", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; }

/* ---- Login / auth pages: big Kefito mascot above the title, like the mockup ---- */
div.mt-6.h-10:has(> img[src*="logo"]) { display: none !important; }
/* Brand lock-up like the mockup header: mascot + "Kefito" + subtitle, large */
.w-authPageWidth { position: relative; padding-top: 168px !important; }
.w-authPageWidth::before {
  content: "Kefito"; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 360px; height: 120px; box-sizing: border-box; padding: 26px 0 0 116px;
  background: url("/assets/kefito.png") left center / auto 120px no-repeat;
  font: 800 56px/1 "Dosis", system-ui, sans-serif; letter-spacing: -.01em; color: var(--text-primary); text-align: left;
}
.w-authPageWidth::after {
  content: "EL ASISTENTE DE CITY POKÉ"; position: absolute; top: 104px; left: 50%; transform: translateX(-50%);
  width: 360px; box-sizing: border-box; padding-left: 119px; text-align: left; white-space: nowrap;
  font: 700 12.5px/1 "Dosis", system-ui, sans-serif; letter-spacing: .16em; color: var(--text-tertiary);
}
.w-authPageWidth h1 { font-weight: 800 !important; letter-spacing: -.01em; }
.w-authPageWidth { border-radius: 20px !important; }

/* Tailwind's hard-coded gray-900 backgrounds → warm brown in dark mode */
.dark .dark\:bg-gray-900, html.dark body { background-color: #201d18 !important; }
.dark .dark\:bg-gray-800 { background-color: #292621 !important; }

/* Focus colours: City Poké orange instead of LibreChat green */
.peer:focus ~ label { color: #f39e5e !important; }
input:focus, textarea:focus { border-color: #f39e5e !important; box-shadow: 0 0 0 1px #f39e5e !important; }
a.text-green-500, a.text-green-600, .text-green-500, .text-green-600 { color: #f39e5e !important; }
.dark .w-authPageWidth input { background-color: #292621 !important; }
.dark .w-authPageWidth label { background-color: #292621 !important; }
/* The brand lock-up replaces the "Welcome back" title */
.w-authPageWidth h1 { display: none !important; }
.w-authPageWidth { padding-top: 150px !important; }
/* Browser autofill paints inputs black: keep them warm */
.dark .w-authPageWidth input:-webkit-autofill,
.dark .w-authPageWidth input:-webkit-autofill:hover,
.dark .w-authPageWidth input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #292621 inset !important; -webkit-text-fill-color: #f2ede5 !important; caret-color: #f2ede5;
}
.w-authPageWidth input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #f7f4ee inset !important; }