/**
 * Bondgenoot — components/empty-state.css
 * /assets/css/components/empty-state.css
 *
 * Cluster D — Pakket D4 — Fase F088
 *
 * Generieke empty-state-blok voor 8 contexten. Werkt zowel op perkament
 * (binnen .pp-content) als op donkere outgame-body (door auto-detect via
 * inheriting color). Standaard: tekst-ink op perkament. Voor donkere bg
 * komt subtle gold-pale variant (zie .bg-empty-state.on-dark).
 */

.bg-empty-state {
    text-align: center;
    padding: var(--space-5) var(--space-4);
    margin: var(--space-4) auto;
    max-width: 460px;
    color: var(--text-on-parchment, #2A1F0E);
}

.bg-empty-state-illustration {
    margin: 0 auto var(--space-4);
    width: 200px;
    max-width: 100%;
}

.bg-empty-state-illustration svg {
    width: 100%;
    height: auto;
    display: block;
}

.bg-empty-state-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0 0 var(--space-2);
    color: inherit;
    letter-spacing: 0.02em;
}

.bg-empty-state-text {
    margin: 0 0 var(--space-4);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--text-on-parchment-muted, #6B5237);
}

.bg-empty-state-cta {
    margin: var(--space-4) 0 0;
}

.bg-empty-state-btn {
    display: inline-block;
    padding: 9px 22px;
    background: linear-gradient(180deg, var(--gold-bright, var(--gold-bright)), var(--gold, var(--gold)));
    color: var(--bg-deepest, var(--bg-deep));
    border: 1px solid var(--gold-deep, var(--gold-deep));
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.55);
    transition: filter 120ms ease;
}

.bg-empty-state-btn:hover { filter: brightness(1.08); }

/* Variant voor wanneer empty-state op donkere body verschijnt
   (bv. /account/werelden body, of in een ingame-shell pre-cluster F). */
.bg-empty-state.on-dark {
    color: var(--gold-pale, var(--gold-pale));
}
.bg-empty-state.on-dark .bg-empty-state-text {
    color: var(--gold-pale, var(--gold-pale));
    opacity: 0.85;
}

/* Reduced-motion: geen subtle hover/scale wanneer een gebruiker dat aangeeft */
@media (prefers-reduced-motion: reduce) {
    .bg-empty-state-btn { transition: none; }
}