/* ============================================================================
   KeyKoin theme — global accent override
   ----------------------------------------------------------------------------
   Recolors KeyAuth's blue accent to KeyKoin purple (#731FFB) across the
   precompiled Tailwind bundles (output.css / dashboard.css). Load this file
   AFTER those stylesheets on every page. Purely visual — no layout changes.
   Refine selectors in WF6 after eyeballing the rendered dashboard.
   ========================================================================== */

:root {
  --kk-purple: #731FFB;
  --kk-purple-700: #651be1;
  --kk-purple-500: #8b46ff;
  --kk-purple-400: #9b5cff;
}

/* ---- text ---- */
.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800,
.text-sky-400, .text-sky-500 { color: var(--kk-purple) !important; }

/* ---- background ---- */
.bg-blue-500, .bg-blue-600, .bg-blue-800 { background-color: var(--kk-purple) !important; }
.bg-blue-700 { background-color: var(--kk-purple-700) !important; }

/* ---- hover text / bg ---- */
.hover\:text-blue-600:hover, .hover\:text-blue-700:hover { color: var(--kk-purple) !important; }
.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover { background-color: var(--kk-purple-700) !important; }

/* ---- borders / divides ---- */
.border-blue-500, .border-blue-600, .border-blue-700, .border-blue-800 { border-color: var(--kk-purple) !important; }
.divide-blue-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--kk-purple) !important; }

/* ---- focus rings ---- */
.focus\:ring-blue-600:focus, .focus\:ring-blue-700:focus, .focus\:ring-blue-800:focus,
.ring-blue-600, .ring-blue-700, .ring-blue-800 { --tw-ring-color: var(--kk-purple) !important; }

/* ---- gradients (profile name text, hero wordmarks, badges) ---- */
.from-sky-400 { --tw-gradient-from: var(--kk-purple-400) !important; --tw-gradient-to: rgb(155 92 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-blue-600 { --tw-gradient-from: var(--kk-purple) !important; --tw-gradient-to: rgb(115 31 251 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-blue-600 { --tw-gradient-to: var(--kk-purple) !important; }
.to-blue-700 { --tw-gradient-to: var(--kk-purple-700) !important; }
.to-sky-400 { --tw-gradient-to: var(--kk-purple-400) !important; }

/* ---- KeyAuth arbitrary-value hexes (bg-[#1e96fc] etc.) ---- */
.bg-\[\#1e96fc\], .bg-\[\#2563eb\], .bg-\[\#1c64f2\], .bg-\[\#3b82f6\] { background-color: var(--kk-purple) !important; }
.text-\[\#1e96fc\], .text-\[\#2563eb\], .text-\[\#1c64f2\] { color: var(--kk-purple) !important; }
.border-\[\#1c64f2\], .border-\[\#2563eb\] { border-color: var(--kk-purple) !important; }
.divide-\[\#1c64f2\] > :not([hidden]) ~ :not([hidden]) { border-color: var(--kk-purple) !important; }
.from-\[\#1e96fc\] { --tw-gradient-from: var(--kk-purple-400) !important; }
.to-\[\#36e2dd\] { --tw-gradient-to: var(--kk-purple) !important; }

/* ---- Flowbite toggle switches + floating labels (peer-*) ---- */
.peer:checked ~ .peer-checked\:bg-blue-600,
.peer:checked ~ .peer-checked\:bg-blue-700 { background-color: var(--kk-purple) !important; }
.peer:focus ~ .peer-focus\:text-blue-600,
.peer:focus ~ .peer-focus\:text-blue-700 { color: var(--kk-purple) !important; }

/* ---- native form accents + selection ---- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--kk-purple); }
::selection { background: var(--kk-purple); color: #fff; }