/* amenda chat — brand override on top of LibreChat's stock theme.
 * Maps amenda's Mint-Teal/Cream palette + DM Sans/TheFuture onto
 * LibreChat's existing CSS custom properties (no class selectors,
 * no !important — only variable overrides, so it survives upgrades). */

/* DM Sans loaded via <link> in index.html (faster than @import).
   TheFuture is local, ships in the image. */
@font-face {
  font-family: "TheFuture";
  src: url("/assets/TheFuture-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TheFuture";
  src: url("/assets/TheFuture-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* amenda brand tokens (mirrors core/apps/amenda-website/tailwind.config.js) */
  --amenda-mint:        #5fb3a8;
  --amenda-mint-light:  #86dbd0;
  --amenda-mint-dark:   #4a9a90;
  --amenda-mint-700:    #3d7f76;
  --amenda-cream:       #f0e9dc;
  --amenda-cream-light: #f7f3eb;
  --amenda-cream-dark:  #e4d8c5;

  /* LibreChat brand override (replaces #ab68ff purple) */
  --brand-purple: var(--amenda-mint);

  /* Send-button + submit surfaces — was green-700/800, now amenda mint */
  --surface-submit:       var(--amenda-mint-dark);
  --surface-submit-hover: var(--amenda-mint-700);

  /* shadcn-style HSL tokens — #5fb3a8 ≈ hsl(172 32% 54%) */
  --primary:             172 32% 54%;
  --primary-foreground:  0 0% 100%;
  --ring:                172 32% 54%;
}

.dark {
  --brand-purple: var(--amenda-mint-light);
  --surface-submit:       var(--amenda-mint);
  --surface-submit-hover: var(--amenda-mint-dark);
  --primary:              172 50% 70%;
  --primary-foreground:   0 0% 7%;
  --ring:                 172 50% 70%;
}

/* DM Sans + amenda.de stylistic sets ('ss06','ss07','ss09','ss11').
 * LibreChat's Tailwind compiles `.font-sans { font-family: Inter, sans-serif }`
 * — we override with same specificity, loaded after, so we win without !important. */
html,
body {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: "ss06", "ss07", "ss09", "ss11";
}

.font-sans {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Form fields don't inherit body font in most browsers — pin them. */
input,
textarea,
select,
button,
[contenteditable] {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss06", "ss07", "ss09", "ss11";
}

/* Form-field focus ring — mint accent across browsers (overrides default blue). */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amenda-mint);
  outline-offset: 1px;
}

/* Sharp corners on form fields and buttons (amenda brand: hard edges).
 * Tailwind's compiled `.rounded-md/-lg/...` classes have higher specificity
 * than element selectors, so `!important` is required here.
 * Specifically-circular elements (avatars, icon-only round buttons) keep
 * their `rounded-full` shape via the override below. */
input,
textarea,
select,
button {
  border-radius: 0 !important;
}

button[class*="rounded-full"],
input[type="checkbox"][class*="rounded-full"],
[role="switch"] {
  border-radius: 9999px !important;
}

/* Selection color in mint, not browser default blue. */
::selection {
  background-color: var(--amenda-mint-light);
  color: #0d0d0d;
}

/* Placeholder text — slightly lighter, kept inside DM Sans context. */
::placeholder {
  font-family: inherit;
  font-feature-settings: inherit;
}

/* TheFuture for display/heading contexts. Chat-area headings come from
   user-rendered Markdown (prose containers) — those keep DM Sans so the
   typography reads as body text, not branding. */
h1,
h2 {
  font-family: "TheFuture", "DM Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Restore DM Sans inside Markdown / prose / chat-message bodies. */
.prose h1,
.prose h2,
[class*="markdown"] h1,
[class*="markdown"] h2,
[class*="message"] h1,
[class*="message"] h2 {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

/* The welcome-screen logo uses /assets/logo.svg. Our amenda mark is black —
   invert it in dark mode so it reads as white on dark backgrounds. */
.dark img[src$="/logo.svg"],
.dark img[src$="assets/logo.svg"] {
  filter: invert(1);
}

/* Scrollbar accents to mint (small touch, big impact on perceived branding). */
* {
  scrollbar-color: var(--amenda-mint-dark) transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--amenda-mint-dark);
}