/*
 * Pixel Music shared visual system.
 * This is the single source of truth for colors and shared UI surfaces across
 * the public site, events, song requests and the admin area.
 */
:root {
    --bg: #171219;
    --bg-deep: #0f0c11;
    --text: #fff2dc;
    --text-dim: #d8b78d;
    --accent-purple: #a15b92;
    --accent-orange: #eb8a6d;
    --accent-gold: #f3bd58;
    --accent-peach: #efa080;
    --accent: var(--accent-orange);
    --accent-dim: rgba(235, 138, 109, .12);
    --surface: #241b27;
    --surface-deep: #120e15;
    --border: rgba(243, 189, 88, .32);
    --font-script: 'Dancing Script', cursive;
    --font-body: 'Inter', sans-serif;
}

body,
body.songwunsch-page,
body.app-shell-page {
    color: var(--text);
    background:
        radial-gradient(circle at 16% 5%, rgba(161, 91, 146, .07), transparent 28rem),
        radial-gradient(circle at 88% 92%, rgba(235, 138, 109, .055), transparent 32rem),
        var(--bg);
}

.eq-bar,
.songwunsch-page .eq-bar,
.app-shell-page .eq-bar {
    background: linear-gradient(to top, var(--accent-gold), var(--accent-orange) 48%, var(--accent-purple));
    opacity: .10;
    filter: none;
    box-shadow: 0 0 18px rgba(243, 189, 88, .16);
}

nav,
.app-topbar,
.songwunsch-page .app-topbar,
.app-shell-page .app-topbar {
    background: rgba(15, 12, 17, .96);
    border-bottom-color: var(--border);
}

.app-shell-page {
    padding-top: calc(5.5rem + 2rem + 1px);
    overflow-x: clip;
}

.admin-page { padding-top: 0; }

.app-shell-page .app-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
}

.nav-btn,
.app-nav a,
.songwunsch-page .app-nav a,
.app-shell-page .app-nav a {
    color: var(--text);
    background: var(--surface-deep);
    border-color: var(--border);
}

.nav-btn[aria-current="page"],
.songwunsch-page .app-nav a[aria-current="page"],
.nav-btn:hover,
.app-nav a:hover,
.app-nav a:focus-visible {
    color: #fff;
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-orange));
}

h1,
.admin-page-heading,
.login-card h1,
.songwunsch-page h1 {
    background: linear-gradient(115deg, #c779ad, var(--accent-peach) 50%, var(--accent-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 14px rgba(235, 138, 109, .2));
}

h2,
.songwunsch-page h2 {
    color: var(--accent-peach);
    border-left-color: var(--accent-gold);
}

.card,
.glass,
.contact-form,
.event-post,
.events-empty,
.image-frame,
.request-item,
.active-event-card,
.public-event-editor,
.admin-public-event-card,
.songwunsch-page .glass,
.songwunsch-page .card,
.songwunsch-page .request-form-card,
.songwunsch-page #request-list .request-card,
.app-shell-page .glass {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
    border-radius: 6px 6px 24px 6px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
}

.form-input,
.field,
.songwunsch-page .field,
.app-shell-page .field,
.songwunsch-page #request-list .reaction-btn {
    color: var(--text);
    background: var(--surface-deep);
    border-color: var(--border);
}

.form-input::placeholder,
.field::placeholder,
.songwunsch-page .field::placeholder { color: #806f83; }

.form-input:focus,
.field:focus,
.songwunsch-page .field:focus {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(235, 138, 109, .12);
}

.hero-cta,
.form-submit,
.btn-primary,
.event-link {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

.hero-cta::before,
.form-submit::before,
.btn::before,
.songwunsch-page .btn::before {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-orange));
}

.hero-logo {
    border: 0;
    box-shadow: none;
    mix-blend-mode: screen;
    filter: contrast(1.15) saturate(1.12);
}

.hero {
    background:
        radial-gradient(circle at 50% 38%, rgba(161, 91, 146, .10), transparent 24rem),
        linear-gradient(180deg, var(--bg-deep), var(--bg));
}

.hero-overlay {
    background: linear-gradient(180deg, rgba(15, 12, 17, .05), rgba(15, 12, 17, .42));
}

footer { color: var(--text-dim); background: var(--bg-deep); border-top-color: var(--border); }

@media (max-width: 736px) {
    .admin-page { padding-top: 0; }
    .login-page { padding-top: 4.3rem; }

    .app-shell-page .app-topbar {
        padding: .55rem .5rem;
    }
}