/* Fhellow tone overlay for LibreChat: claude.ai-like warmth, no fork.
 *
 * LibreChat themes in two layers: semantic tokens (--surface-*, --text-*,
 * --border-*) that all resolve to a primitive ramp (--white, --gray-20 …
 * --gray-900) defined on :root. Overriding the ~14 primitives therefore
 * restyles every surface, including ones this file never names. That is why
 * it is a handful of lines instead of the 35-token semantic list, and why a new
 * upstream surface inherits the tone instead of appearing stark white.
 *
 * The lightness steps of the upstream ramp are preserved, so every existing
 * text-on-surface contrast pair keeps its ratio; only the hue moves, from a
 * cool grey to a warm neutral.
 *
 * Loaded by a <link> that build_tone_overlay.py injects into a copy of the
 * image's own index.html. Nothing in LibreChat's source is modified.
 */

:root {
  /* Anchors: the two values taken from claude.ai's own page CSS. */
  --fh-paper: #faf9f5;
  --fh-ink: #141413;

  /* Warm neutral ramp, same lightness steps as upstream's cool one.
     Derived from the anchors above; these mid-tones are our interpolation,
     not sampled brand values. */
  --white: var(--fh-paper);
  --gray-20: #f1efe8;
  --gray-50: #f5f4ee;
  --gray-100: #ebe9e2;
  --gray-200: #e3e0d8;
  --gray-300: #cfcbc0;
  --gray-400: #9c968a;
  --gray-500: #5c574e;
  --gray-600: #443f38;
  --gray-700: #302c27;
  --gray-800: #22201d;
  --gray-850: #1a1917;
  --gray-900: var(--fh-ink);

  /* The gizmo ramp is a second cool set used by a few components. */
  --gizmo-gray-500: #6b655a;
  --gizmo-gray-600: #514c44;
  --gizmo-gray-950: #1c1b19;

  /* Accent. claude.ai's is a clay orange; this is an approximation of that
     family, not a sampled brand colour. It replaces LibreChat's violet. */
  --fh-clay: #d97757;
  --brand-purple: var(--fh-clay);

  /* Softer corners read closer to claude.ai than upstream's 8px. */
  --radius: 0.75rem;
}

/* Chat surface: claude.ai puts the thread on the paper tone rather than pure
   white, which is most of the warmth you actually perceive. */
html {
  --surface-chat: var(--fh-paper);
  --surface-primary: var(--fh-paper);
  --header-primary: var(--fh-paper);
  --presentation: var(--fh-paper);
}

/* Dark side: warm the greys the same way instead of inverting to blue-black. */
.dark {
  --surface-chat: #262624;
  --surface-primary: #1f1e1d;
  --presentation: #1f1e1d;
  --header-primary: #1f1e1d;
}

/* Composer and message cards: a touch more radius, a lighter border. Scoped to
   the token so it cannot fight upstream's utility classes on specificity. */
form textarea,
form [class*="rounded"] {
  border-radius: var(--radius);
}

/* The send button is the one place the accent should be assertive. */
button[data-testid="send-button"]:not(:disabled) {
  background-color: var(--fh-clay);
  border-color: var(--fh-clay);
}

button[data-testid="send-button"]:not(:disabled):hover {
  filter: brightness(0.94);
}

/* Reduce the cool blue in focus rings so they sit in the same family. */
:root {
  --ring: var(--gray-400);
  --ring-primary: var(--gray-500);
}

/* Fhellow does not ship claude.ai's typefaces (Styrene and Copernicus are
   licensed, and the artifact CSP blocks font CDNs anyway), so the stack stays
   system-native with Korean coverage. Tone is matched; the faces are not
   imitated, and no Claude or Anthropic mark appears anywhere. */
:root {
  --fh-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

body {
  font-family: var(--fh-sans);
}

/* --- Fhellow: hide scoped-out composer buttons (attach files, MCP) ---
   Feature-scoping at the UI layer. Attach + MCP are out of the basic chat
   surface (attachments go through the dedicated upload flow; no MCP tools). */
#attach-file,
#attach-file-menu-button,
[aria-label="Attach Files"],
[aria-label="Attach File Options"],
[aria-label="MCP Servers"] {
  display: none !important;
}