/* ZQ3 look for LibreChat: Montserrat, Datarmony blue for actions, Southwatts red kept for errors. */

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

html {
  --theme-font-family: Montserrat, Inter, sans-serif;
  --accent-primary: 0 70 226;
  --accent-primary-hover: 0 55 179;
  --surface-submit: 0 70 226;
  --surface-submit-hover: 0 55 179;
  --brand-purple: 0 70 226;
  --zq3-glow: 0 70 226;
}

.dark {
  --accent-primary: 85 135 252;
  --accent-primary-hover: 122 162 255;
  --surface-submit: 0 70 226;
  --surface-submit-hover: 31 103 202;
  --brand-purple: 85 135 252;
  --zq3-glow: 85 135 252;
}

html, body, .font-sans {
  font-family: Montserrat, Inter, sans-serif !important;
  letter-spacing: -0.005em;
}

/* Headings and the landing greeting a little bolder, as on the ZQ3 decks. */
h1, h2, h3, .text-2xl, .text-3xl { font-weight: 700; letter-spacing: -0.02em; }

/* The sign-in page: brand light behind a floating card. */
#root > div.min-h-screen:has(main form) {
  background:
    radial-gradient(55rem 38rem at 12% -8%, rgb(var(--zq3-glow) / 0.22), transparent 62%),
    radial-gradient(45rem 32rem at 105% 108%, rgb(212 29 70 / 0.14), transparent 60%),
    radial-gradient(30rem 22rem at 85% 10%, rgb(85 135 252 / 0.12), transparent 70%),
    rgb(var(--surface-primary));
}
#root > div.min-h-screen:has(main form) main > div.w-authPageWidth {
  border-radius: 1.5rem;
  padding: 2.25rem 2rem;
  border: 1px solid rgb(var(--accent-primary) / 0.12);
  box-shadow: 0 30px 80px -30px rgb(11 42 143 / 0.35), 0 2px 6px rgb(0 0 0 / 0.04);
  backdrop-filter: blur(6px);
}
#root > div.min-h-screen:has(main form) div:has(> img[src*="logo.svg"]) {
  height: 4.5rem;
  margin-top: 3rem;
}
#root > div.min-h-screen:has(main form) img[src*="logo.svg"] {
  filter: drop-shadow(0 12px 24px rgb(0 70 226 / 0.35));
}

/* The message box gets a brand ring when it has focus. */
form:focus-within textarea { caret-color: rgb(var(--accent-primary)); }
form:has(textarea:focus) > div:first-child {
  box-shadow: 0 0 0 1px rgb(var(--accent-primary) / 0.45), 0 8px 30px -12px rgb(var(--accent-primary) / 0.45);
  transition: box-shadow 200ms ease;
}

::selection { background: rgb(var(--accent-primary) / 0.22); }