/**
 * Rockfest theme for the Bolt Discussion widget.
 *
 * Two customization paths, both supported by the extension:
 *   1. Re-declare --bd-* variables to map onto our Tailwind v4 tokens.
 *   2. Override BEM classes directly for structural/typographic flourishes.
 *
 * Direction: gig-poster. Brand red, condensed Oswald set in caps for names and
 * actions, hard edges, and square avatars ringed in red like a backstage pass.
 *
 * The doubled `.bolt-discussion` selector raises specificity so these win
 * regardless of stylesheet load order relative to the injected discussion.css.
 */
.bolt-discussion.bolt-discussion {
    /* Palette → Tailwind tokens */
    --bd-color-text: var(--color-gray-900, #111827);
    --bd-color-muted: var(--color-gray-500, #6b7280);
    --bd-color-surface: var(--color-white, #ffffff);
    --bd-color-surface-alt: var(--color-gray-50, #f9fafb);
    --bd-color-border: var(--color-gray-300, #d1d5db);

    --bd-color-accent: var(--color-brand, #dc2626);
    --bd-color-accent-contrast: var(--color-white, #ffffff);
    --bd-color-accent-soft: color-mix(in srgb, var(--color-brand, #dc2626) 12%, transparent);
    --bd-color-danger: var(--color-red-600, #dc2626);

    --bd-color-pending-bg: color-mix(in srgb, var(--color-brand, #dc2626) 12%, transparent);
    --bd-color-pending-text: var(--color-brand, #dc2626);

    /* Type → condensed Oswald */
    --bd-font: var(--font-sans, Oswald, sans-serif);

    /* Shape → hard, poster-like edges */
    --bd-radius-sm: 2px;
    --bd-radius: 4px;
    --bd-radius-lg: 6px;

    /* Avatars → square backstage-pass tiles: muted, dark, so the red stays the
       hero. A hint of per-author hue remains for recognisability. */
    --bd-avatar-radius: 4px;
    --bd-avatar-sat: 28%;
    --bd-avatar-light: 30%;

    /* Thread connector tinted with the brand */
    --bd-thread-line: color-mix(in srgb, var(--color-brand, #dc2626) 30%, var(--color-gray-200, #e5e7eb));
    --bd-thread-width: 2px;
}

/* Names, the section title, and the primary action shout in condensed caps. */
.bolt-discussion.bolt-discussion .bolt-discussion__title,
.bolt-discussion.bolt-discussion .bolt-discussion__author {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bolt-discussion.bolt-discussion .bolt-discussion__avatar {
    box-shadow: 0 0 0 2px var(--color-brand, #dc2626);
}

.bolt-discussion.bolt-discussion .bolt-discussion__btn--primary {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bolt-discussion.bolt-discussion .bolt-discussion__btn--primary:hover {
    background: var(--color-brand-hover, #b91c1c);
    filter: none;
}