/* ═══════════════════════════════════════════
   WAL LIVE — Global Brand Colour Overrides
   Primary accent: #e3ff04 (electric yellow)
   Text on accent:  #0a0a0a (near-black)
═══════════════════════════════════════════ */

:root {
    --accent:        #e3ff04;
    --accent-dark:   #c8e000;
    --accent-darker: #a8bc00;
    --accent-glow:   rgba(227,255,4,0.22);
    --accent-text:   #0a0a0a;
}

/* ── Utility classes ─────────────────────── */
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: linear-gradient(135deg, #e3ff04 0%, #c8e000 100%);
    color: #0a0a0a !important;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: opacity .18s, box-shadow .18s, transform .12s;
    text-decoration: none;
}
.btn-brand:hover {
    opacity: .9;
    box-shadow: 0 0 18px rgba(227,255,4,.35);
    transform: translateY(-1px);
}
.btn-brand:active { transform: translateY(0); opacity: 1; }

.btn-brand-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: transparent;
    color: #e3ff04 !important;
    border: 1.5px solid #e3ff04;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, color .18s, box-shadow .18s;
    text-decoration: none;
}
.btn-brand-outline:hover {
    background: #e3ff04;
    color: #0a0a0a !important;
    box-shadow: 0 0 14px rgba(227,255,4,.3);
}

/* ── Tailwind red/orange/rose gradient overrides ── */
.bg-gradient-to-r.from-red-500,
.bg-gradient-to-r.from-red-600,
.bg-gradient-to-r.from-orange-500,
.bg-gradient-to-r.from-rose-500,
.bg-gradient-to-r.from-pink-500 {
    background: linear-gradient(135deg, #e3ff04 0%, #c8e000 100%) !important;
    color: #0a0a0a !important;
}

/* ── Solid bg overrides ── */
.bg-red-500, .bg-red-600, .bg-red-700,
.bg-orange-500, .bg-orange-600,
.bg-rose-500, .bg-rose-600,
.bg-pink-500, .bg-pink-600 {
    background-color: #e3ff04 !important;
    color: #0a0a0a !important;
}

.hover\:bg-red-600:hover,   .hover\:bg-red-700:hover,
.hover\:bg-orange-600:hover,.hover\:bg-orange-700:hover,
.hover\:bg-rose-600:hover,  .hover\:bg-pink-600:hover {
    background-color: #c8e000 !important;
}

/* ── Text overrides ── */
.text-red-400, .text-red-500, .text-red-600,
.text-orange-400, .text-orange-500,
.text-rose-400,  .text-rose-500 {
    color: #e3ff04 !important;
}

/* ── Border overrides ── */
.border-red-500, .border-red-600,
.border-orange-500, .border-rose-500 {
    border-color: #e3ff04 !important;
}

/* ── Focus ring ── */
.ring-red-500, .focus\:ring-red-500:focus,
.ring-orange-500 { --tw-ring-color: #e3ff04 !important; }

/* ── Checkbox / range ── */
input[type=checkbox], input[type=radio], input[type=range] {
    accent-color: #e3ff04;
}

/* ── Links that should glow on hover ── */
a.accent-link { color: #e3ff04; text-decoration: none; transition: opacity .15s; }
a.accent-link:hover { opacity: .75; }