/* ══════════════════════════════════════════════════════════════════
   AuctionStart — Converse.js brand overrides
   ══════════════════════════════════════════════════════════════════

   Converse exposes ~400 design tokens as CSS custom properties named
   `--converse-*` (it is built on Bootstrap 5). Overriding them here lets us
   re-skin the client completely WITHOUT forking or rebuilding the bundle —
   this is the part that is not possible with an open-core product.

   Loaded after /dist/converse.min.css, so these win on equal specificity.

   To re-brand: change --brand-accent + --brand-accent-rgb (keep them in sync),
   then pick a base theme in index.html ('default' | 'nord' | 'dracula' | 'skeletor').
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* ── change these two together ─────────────────────────────── */
    --brand-accent: #0f766e;              /* buttons, links, own message bubbles */
    --brand-accent-rgb: 15, 118, 110;     /* same colour as r, g, b (no rgb()) */
}

/* Map the brand colour onto Converse's own tokens. */
:root,
.conversejs {
    --converse-primary: var(--brand-accent);
    --converse-primary-rgb: var(--brand-accent-rgb);
    --converse-primary-text-emphasis: var(--brand-accent);
    --converse-primary-bg-subtle: rgba(var(--brand-accent-rgb), 0.12);
    --converse-primary-border-subtle: rgba(var(--brand-accent-rgb), 0.35);
}

/* ── Optional readability tweaks ─────────────────────────────────────
   Converse inherits a fairly small base size; bump it slightly for desktop.
   Delete this block if you prefer the stock sizing.                     */
@media (min-width: 1200px) {
    :root,
    .conversejs {
        --converse-body-font-size: 15px;
    }
}

/* ── Example: rounding / spacing personality ─────────────────────────
   Uncomment to make the client feel softer.
   :root, .conversejs { --converse-border-radius: 10px; }
*/