/* Maveric brand: black, gold, white. Tailwind handles layout, this file holds the few brand tokens. */
:root { --gold: #C9A227; --gold-dark: #9c7c1c; }
.bg-gold { background-color: var(--gold); }
.text-gold { color: var(--gold); }
.border-gold { border-color: var(--gold); }
.hover\:text-gold:hover { color: var(--gold); }
.btn-gold { display: inline-block; background: var(--gold); color: #000; font-weight: 600; padding: .55rem 1.1rem; border-radius: .375rem; }
.btn-gold:hover { background: var(--gold-dark); color: #fff; }
.btn-outline { display: inline-block; border: 1px solid var(--gold); color: var(--gold); font-weight: 600; padding: .55rem 1.1rem; border-radius: .375rem; }
.btn-outline:hover { background: var(--gold); color: #000; }
.card { background: #0a0a0a; border: 1px solid #27272a; border-radius: .75rem; padding: 1.5rem; }
.input { width: 100%; background: #0a0a0a; border: 1px solid #3f3f46; border-radius: .375rem; padding: .6rem .8rem; color: #fff; }
.input:focus { outline: none; border-color: var(--gold); }
.label { display: block; font-size: .8rem; color: #a1a1aa; margin-bottom: .3rem; }

select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.2rem; }

.pill-green { display: inline-block; padding: .15rem .55rem; border-radius: 9999px; font-size: .75rem; border: 1px solid #10b981; color: #10b981; background: rgba(16,185,129,.12); }
.pill-dim { display: inline-block; padding: .15rem .55rem; border-radius: 9999px; font-size: .75rem; border: 1px solid #3f3f46; color: #71717a; }

/* ring-1-gold for highlight */
.ring-1-gold { box-shadow: 0 0 0 1px var(--gold); }