/* ==========================================================================
   Yakka black & gold theme override
   Loaded AFTER the Tailwind CDN script and per-page <style> blocks' colors.
   Remove the <link> to this file (or the file itself) to revert to purple.
   Gold scale: 50 #FBF7EA · 100 #F3EACB · 300 #E3C96B · 400 #D9B94E
               500 #C9A227 · 600 #A8861D · 700 #8C6D1F · 800 #6B5417
   ========================================================================== */

:root:root {
    --strong-yellow: #D4AF37;
    --strong-teal: #C9A227;
    --yakka-purple: #C9A227;
    --strong-dark: #0A0A0A;
}

/* --- brand gradients ----------------------------------------------------- */
.gradient-hero {
    background-image: radial-gradient(ellipse at 70% 20%, #3B2F10 0%, #161616 45%, #000000 100%) !important;
}
.gradient-accent {
    background-image: linear-gradient(135deg, #C9A227 0%, #8C6D1F 100%) !important;
}

/* --- purple utilities → gold --------------------------------------------- */
.bg-purple-50  { background-color: #FBF7EA !important; }
.bg-purple-100 { background-color: #F3EACB !important; }
.bg-purple-500 { background-color: #C9A227 !important; }
.bg-purple-600 { background-color: #A8861D !important; }
.bg-purple-700 { background-color: #8C6D1F !important; }
.text-purple-300 { color: #E3C96B !important; }
.text-purple-400 { color: #D9B94E !important; }
.text-purple-500 { color: #C9A227 !important; }
.text-purple-600 { color: #A8861D !important; }
.text-purple-700 { color: #8C6D1F !important; }
.text-purple-800 { color: #6B5417 !important; }
.border-purple-300 { border-color: #E3C96B !important; }
.border-purple-500 { border-color: #C9A227 !important; }

/* --- pink utilities → gold ----------------------------------------------- */
.bg-pink-50  { background-color: #FBF7EA !important; }
.bg-pink-100 { background-color: #F3EACB !important; }
.bg-pink-500, .bg-pink-500\/80 { background-color: #C9A227 !important; }
.bg-pink-600 { background-color: #A8861D !important; }
.text-pink-400 { color: #D9B94E !important; }
.text-pink-500 { color: #C9A227 !important; }
.text-pink-600 { color: #A8861D !important; }
.text-pink-800 { color: #6B5417 !important; }
.border-pink-300 { border-color: #E3C96B !important; }
.border-pink-400 { border-color: #D9B94E !important; }

/* --- indigo / fuchsia accents → gold ------------------------------------- */
.text-indigo-600 { color: #A8861D !important; }
.text-indigo-700 { color: #8C6D1F !important; }

/* --- gradient stops ------------------------------------------------------ */
.from-purple-50   { --tw-gradient-from: #FBF7EA !important; --tw-gradient-to: rgb(251 247 234 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-purple-400  { --tw-gradient-from: #D9B94E !important; --tw-gradient-to: rgb(217 185 78 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-purple-600  { --tw-gradient-from: #A8861D !important; --tw-gradient-to: rgb(168 134 29 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-pink-500    { --tw-gradient-from: #C9A227 !important; --tw-gradient-to: rgb(201 162 39 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-fuchsia-500 { --tw-gradient-from: #C9A227 !important; --tw-gradient-to: rgb(201 162 39 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-indigo-50   { --tw-gradient-from: #FBF7EA !important; --tw-gradient-to: rgb(251 247 234 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-purple-100 { --tw-gradient-to: #F3EACB !important; }
.to-purple-600 { --tw-gradient-to: #A8861D !important; }
.to-purple-800 { --tw-gradient-to: #6B5417 !important; }
.to-pink-50   { --tw-gradient-to: #FBF7EA !important; }
.to-pink-400  { --tw-gradient-to: #D9B94E !important; }
.to-pink-500  { --tw-gradient-to: #C9A227 !important; }
.to-pink-700  { --tw-gradient-to: #8C6D1F !important; }
.to-indigo-50  { --tw-gradient-to: #FBF7EA !important; }
.to-indigo-100 { --tw-gradient-to: #F3EACB !important; }
.to-indigo-600 { --tw-gradient-to: #A8861D !important; }

/* --- hover variants ------------------------------------------------------ */
.hover\:bg-purple-100:hover { background-color: #F3EACB !important; }
.hover\:bg-purple-500:hover { background-color: #C9A227 !important; }
.hover\:bg-purple-600:hover { background-color: #A8861D !important; }
.hover\:bg-purple-700:hover { background-color: #8C6D1F !important; }
.hover\:bg-pink-600:hover   { background-color: #A8861D !important; }
.hover\:text-purple-500:hover { color: #C9A227 !important; }
.hover\:text-purple-600:hover { color: #A8861D !important; }
.hover\:text-purple-700:hover { color: #8C6D1F !important; }
.hover\:text-pink-600:hover   { color: #A8861D !important; }

/* --- logo: shift purple raster to gold ----------------------------------- */
img[src*="logo.png"] { filter: hue-rotate(144deg) saturate(0.75) brightness(1.05); }
img[src*="logo.png"].brightness-200 { filter: hue-rotate(144deg) saturate(0.6) brightness(2); }

/* --- custom brand classes: beat the CDN-generated copies ------------------ */
.bg-strong-teal { background-color: var(--strong-teal) !important; }
.text-strong-teal { color: var(--strong-teal) !important; }
.border-strong-teal { border-color: var(--strong-teal) !important; }
.hover\:bg-strong-teal:hover { background-color: var(--strong-teal) !important; }
.hover\:text-strong-teal:hover { color: var(--strong-teal) !important; }
.bg-yakka-purple { background-color: var(--yakka-purple) !important; }
.text-yakka-purple { color: var(--yakka-purple) !important; }
.hover\:text-yakka-purple:hover { color: var(--yakka-purple) !important; }
.hover\:bg-yakka-purple:hover { background-color: var(--yakka-purple) !important; }
.border-yakka-purple { border-color: var(--yakka-purple) !important; }
.bg-strong-yellow { background-color: var(--strong-yellow) !important; }
.text-strong-yellow { color: var(--strong-yellow) !important; }
.hover\:text-strong-yellow:hover { color: var(--strong-yellow) !important; }