/* Farrokhpour neon-blue / violet palette. Existing interactions and animations remain intact. */
:root { --neon-blue: 56, 189, 248; --neon-violet: 139, 92, 246; --neon-indigo: 99, 102, 241; }
[data-theme="light"] { --neon-blue: 37, 99, 235; --neon-violet: 109, 40, 217; --neon-indigo: 79, 70, 229; }

body {
  background-image: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(var(--neon-violet), .16), transparent), radial-gradient(ellipse 60% 45% at 8% 92%, rgba(var(--neon-blue), .10), transparent);
}

.avatar-ring { background: conic-gradient(from 0deg, transparent 0, rgba(var(--neon-blue), .98) 12%, rgba(var(--neon-violet), .72) 24%, transparent 38%, transparent 100%); }
.spotlight::before { background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--neon-blue), .13), transparent 65%); }
.card-border-glow::before { background: conic-gradient(from var(--border-angle, 0deg), rgba(var(--neon-blue), 0) 0, rgba(var(--neon-blue), .62) 10%, rgba(var(--neon-violet), .70) 17%, rgba(232, 240, 244, .24) 22%, rgba(var(--neon-blue), 0) 32%, rgba(var(--neon-blue), 0) 100%); }
.shadow-glow { box-shadow: 0 0 0 1px rgba(var(--neon-blue), .42), 0 8px 40px -8px rgba(var(--neon-violet), .48) !important; }
.shadow-btn { box-shadow: 0 1px 0 0 hsla(0, 0%, 100%, .22) inset, 0 10px 30px -10px rgba(var(--neon-violet), .65) !important; }

/* Remap the prebuilt accent utilities without touching the motion code. */
.bg-amber-400, .bg-amber-500\/10, .bg-amber-500\/15, .bg-amber-500\/20, .bg-amber-300\/8 { background-color: rgba(var(--neon-blue), .14) !important; }
.bg-copper-500\/15 { background-color: rgba(var(--neon-violet), .18) !important; }
.text-amber-300, .text-amber-400, .hover\:text-amber-400:hover, .hover\:text-amber-300:hover { color: rgb(var(--neon-blue)) !important; }
.text-amber-500\/60 { color: rgba(var(--neon-violet), .72) !important; }
.from-amber-300 { --tw-gradient-from: rgb(var(--neon-blue)) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(var(--neon-blue), 0) var(--tw-gradient-to-position) !important; }
.via-amber-500 { --tw-gradient-via: rgb(var(--neon-indigo)) var(--tw-gradient-via-position) !important; }
.to-amber-500, .to-copper-500 { --tw-gradient-to: rgb(var(--neon-violet)) var(--tw-gradient-to-position) !important; }
.hover\:bg-amber-500\/15:hover, .hover\:bg-amber-500\/20:hover { background-color: rgba(var(--neon-violet), .22) !important; }
[data-theme="light"] .text-amber-300, [data-theme="light"] .text-amber-400 { color: rgb(var(--neon-violet)) !important; }