/* Shared visual language for every demo page. Keep these tokens aligned with style.css. */
body[data-theme="dark"] {
  --page-bg: #0b0b0c;
  --chat-bg: #131316;
  --client: #c9b88a;
  --client-text: #0b0b0c;
  --bot: #1a1a1f;
  --bot-text: #f4f4f5;
  --accent: #c9b88a;
  --header: #131316;
  --header-text: #f4f4f5;
  --panel: #131316;
  --panel-text: #f4f4f5;
  --border: #26262c;
  --muted: #8a8a93;
}

body[data-theme="light"] {
  --page-bg: #f7f5f0;
  --chat-bg: #ffffff;
  --client: #9a8654;
  --client-text: #ffffff;
  --bot: #f0ece2;
  --bot-text: #14140f;
  --accent: #9a8654;
  --header: #ffffff;
  --header-text: #14140f;
  --panel: #ffffff;
  --panel-text: #14140f;
  --border: #e4ddcc;
  --muted: #6a6759;
}

/* An initially open answer must never be clipped while fonts or translations load. */
.faq-item.open .faq-a {
  max-height: none !important;
}

.faq-q:focus-visible,
.lang-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}