/* Demo-box branding for Chainlit (ADR-0045).
 *
 * Chainlit ships shadcn-style HSL triplets; its default --primary is
 * `340 92% 52%`, the pink on the Sign In button and the input focus ring. That
 * pink is the last visibly-Chainlit thing on a page a prospect sees first.
 *
 * #a8542f — the marketing site's terracotta — is `18 56% 42%` in the same
 * notation. Values are bare triplets, not colours: Chainlit wraps them in hsl().
 */

/* !important is load-bearing here: the injection point sits above Chainlit's own
 * bundle, so at equal specificity its :root rule wins on source order. Custom
 * properties honour !important, which is the cheapest way to come out on top
 * without guessing at selector weight. */
:root,
.light,
html.light,
html:not(.dark) {
  --primary: 18 56% 42% !important;
  --ring: 18 56% 42% !important;
}

.dark,
html.dark {
  /* Lifted for contrast if a visitor switches themes. */
  --primary: 20 60% 55% !important;
  --ring: 20 60% 55% !important;
}

/* The site is set in Georgia; matching the app's headings keeps the two halves
 * of the product recognisably one thing. Body text stays in Chainlit's sans,
 * which is easier to read at length in a chat transcript. */
h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
}