/* Shared surfaces from the forum index, including nested cards and controls.
 * Keep this separate from the Vite bundle so the fallback layout uses it too.
 */
:root {
    --ec-surface-panel: rgba(24, 24, 27, 0.3);
    --ec-surface-row: rgba(0, 0, 0, 0.14);
    --ec-surface-heading: rgba(39, 39, 42, 0.3);
    --ec-surface-control: rgba(9, 9, 11, 0.72);
    --ec-surface-hover: rgba(24, 24, 27, 0.46);
    --ec-surface-overlay: rgba(9, 9, 11, 0.98);
}

/* Existing templates and dynamically inserted content share these utilities.
 * Important prevents older inline theme rules from restoring solid grey.
 */
body :is(
    .bg-zinc-900, .bg-zinc-900\/30, .bg-zinc-900\/40,
    .bg-zinc-900\/50, .bg-zinc-900\/60, .bg-zinc-900\/70,
    .bg-zinc-900\/80, .bg-zinc-900\/90,
    .ec-card, .ec-card-muted, .ec-empty
) {
    background-color: var(--ec-surface-panel) !important;
}

body :is(
    .bg-zinc-800, .bg-zinc-800\/20, .bg-zinc-800\/40,
    .bg-zinc-800\/50, .bg-zinc-800\/60, .bg-zinc-800\/70,
    .bg-zinc-800\/80, .bb-quote
) {
    background-color: var(--ec-surface-row) !important;
}

body .bg-zinc-800\/30 {
    background-color: var(--ec-surface-heading) !important;
}

body :is(
    .bg-zinc-700, .bg-zinc-700\/20, .bg-zinc-700\/30,
    .bg-zinc-700\/40, .bg-zinc-700\/50,
    .ec-input, .ec-textarea, .ec-select, .ec-btn-secondary,
    .ec-badge, .ec-pill
) {
    background-color: var(--ec-surface-control) !important;
}

/* Floating menus need a dense dark surface so underlying text stays hidden. */
body :is(.bg-zinc-900\/95, .context-menu) {
    background-color: var(--ec-surface-overlay) !important;
}

/* Admin flyouts sit over page content and must fully hide the text beneath. */
body .nav-primary__submenu {
    background-color: rgb(18, 18, 21) !important;
}

body :is(
    .hover\:bg-zinc-700, .hover\:bg-zinc-700\/30, .hover\:bg-zinc-700\/70,
    .hover\:bg-zinc-800, .hover\:bg-zinc-800\/30, .hover\:bg-zinc-800\/40,
    .hover\:bg-zinc-800\/50, .hover\:bg-zinc-800\/60, .hover\:bg-zinc-800\/70,
    .hover\:bg-zinc-900, .hover\:bg-zinc-900\/50, .hover\:bg-zinc-900\/70,
    .hover\:bg-zinc-900\/90, .ec-card-hover, .ec-btn-secondary,
    .ec-btn-ghost, .context-menu-item:not(.disabled)
):hover {
    background-color: var(--ec-surface-hover) !important;
}

body .focus\:bg-zinc-800\/50:focus,
body .active\:bg-zinc-700:active {
    background-color: var(--ec-surface-hover) !important;
}

/* Semantic cards and form controls also inherit the same surfaces. */
body .bb-quote .bb-quote {
    background-color: var(--ec-surface-row) !important;
}

body .hero-gradient {
    background: linear-gradient(to bottom, #09090b, var(--ec-surface-panel)) !important;
}

body :is(.from-zinc-700, .from-zinc-700\/30, .from-zinc-700\/50, .from-zinc-700\/60, .from-zinc-700\/70, .from-zinc-700\/80) {
    --tw-gradient-from: var(--ec-surface-row) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(9, 9, 11, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body :is(.from-zinc-800, .from-zinc-800\/30, .from-zinc-800\/50, .from-zinc-800\/60, .from-zinc-800\/70, .from-zinc-800\/80) {
    --tw-gradient-from: var(--ec-surface-row) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(9, 9, 11, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body :is(.from-zinc-900, .from-zinc-900\/30, .from-zinc-900\/50, .from-zinc-900\/60, .from-zinc-900\/70, .from-zinc-900\/80) {
    --tw-gradient-from: var(--ec-surface-panel) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(9, 9, 11, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body :is(.via-zinc-700, .via-zinc-700\/30, .via-zinc-700\/50, .via-zinc-700\/60, .via-zinc-700\/70, .via-zinc-700\/80) {
    --tw-gradient-to: rgba(9, 9, 11, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--ec-surface-row) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

body :is(.via-zinc-800, .via-zinc-800\/30, .via-zinc-800\/50, .via-zinc-800\/60, .via-zinc-800\/70, .via-zinc-800\/80) {
    --tw-gradient-to: rgba(9, 9, 11, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--ec-surface-row) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

body :is(.via-zinc-900, .via-zinc-900\/30, .via-zinc-900\/50, .via-zinc-900\/60, .via-zinc-900\/70, .via-zinc-900\/80) {
    --tw-gradient-to: rgba(9, 9, 11, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--ec-surface-panel) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

body :is(.to-zinc-700, .to-zinc-700\/30, .to-zinc-700\/50, .to-zinc-700\/60, .to-zinc-700\/70, .to-zinc-700\/80) {
    --tw-gradient-to: var(--ec-surface-row) var(--tw-gradient-to-position) !important;
}

body :is(.to-zinc-800, .to-zinc-800\/30, .to-zinc-800\/50, .to-zinc-800\/60, .to-zinc-800\/70, .to-zinc-800\/80) {
    --tw-gradient-to: var(--ec-surface-row) var(--tw-gradient-to-position) !important;
}

body :is(.to-zinc-900, .to-zinc-900\/30, .to-zinc-900\/50, .to-zinc-900\/60, .to-zinc-900\/70, .to-zinc-900\/80) {
    --tw-gradient-to: var(--ec-surface-panel) var(--tw-gradient-to-position) !important;
}