/* ==========================================================================
   Målarbild.se — shared brand theme for the static SEO pages
   Maps the legacy pink/indigo/violet accents onto the app's design tokens
   ("Calm studio": brand purple #8B7BF7, see .interface-design/system.md).
   Loaded via shared/head.html and propagated by scripts/update-all-headers.js.
   ========================================================================== */

:root {
  --brand: #8B7BF7;
  --brand-deep: #6D5AE6;
  --brand-wash: rgba(139, 123, 247, 0.10);
  --brand-tint: #F3F1FE;
  --ink: #1E1E28;
  --ink-2: #5D5D6B;
}

/* --- Legacy hardcoded gradients → brand ---------------------------------- */
.gradient-bg {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
}
.orange-gradient {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
}

/* --- Orange accent (the static site's second accent) → brand ------------- */
.bg-orange-400, .bg-orange-500, .bg-orange-600 { background-color: var(--brand) !important; }
.hover\:bg-orange-500:hover, .hover\:bg-orange-600:hover, .hover\:bg-orange-700:hover { background-color: var(--brand-deep) !important; }
.text-orange-400, .text-orange-500 { color: var(--brand) !important; }
.text-orange-600, .text-orange-700 { color: var(--brand-deep) !important; }
.hover\:text-orange-500:hover, .hover\:text-orange-600:hover { color: var(--brand-deep) !important; }
.border-orange-300, .border-orange-400, .border-orange-500 { border-color: var(--brand) !important; }
.hover\:border-orange-400:hover, .hover\:border-orange-500:hover { border-color: var(--brand) !important; }
.ring-orange-400, .ring-orange-500, .focus\:ring-orange-500:focus { --tw-ring-color: var(--brand) !important; }
.from-orange-400, .from-orange-500 { --tw-gradient-from: var(--brand) !important; }
.to-orange-500, .to-orange-600 { --tw-gradient-to: var(--brand-deep) !important; }
.bg-orange-50, .bg-orange-100 { background-color: var(--brand-tint) !important; }

/* --- Black primary buttons (e.g. "Skapa Konto") → brand ------------------ */
.bg-black.text-white:not(.keep-black) { background-color: var(--brand) !important; }
.hover\:bg-gray-800:hover.text-white { background-color: var(--brand-deep) !important; }

/* --- Gradient stops that were unmapped ----------------------------------- */
.to-blue-50, .to-blue-100 { --tw-gradient-to: #FBFAFF !important; }
.via-pink-50, .via-purple-50, .via-blue-50 { --tw-gradient-stops: var(--tw-gradient-from), #F8F6FF var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

/* --- Tailwind CDN accent utilities → brand -------------------------------- */
/* Text */
.text-purple-400, .text-purple-500, .text-pink-500, .text-indigo-500 { color: var(--brand) !important; }
.text-purple-600, .text-purple-700, .text-purple-800, .text-indigo-600, .text-pink-600 { color: var(--brand-deep) !important; }
.hover\:text-purple-500:hover, .hover\:text-purple-600:hover,
.hover\:text-pink-500:hover, .hover\:text-indigo-600:hover { color: var(--brand-deep) !important; }

/* Backgrounds */
.bg-purple-50, .bg-pink-50, .bg-indigo-50 { background-color: var(--brand-tint) !important; }
.bg-purple-100, .bg-pink-100, .bg-indigo-100 { background-color: var(--brand-tint) !important; }
.bg-purple-500, .bg-purple-600, .bg-indigo-500, .bg-indigo-600, .bg-pink-500 { background-color: var(--brand) !important; }
.bg-purple-700, .bg-indigo-700 { background-color: var(--brand-deep) !important; }
.hover\:bg-purple-600:hover, .hover\:bg-purple-700:hover,
.hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover, .hover\:bg-pink-600:hover { background-color: var(--brand-deep) !important; }

/* Borders */
.border-purple-400, .border-purple-500, .border-purple-600,
.border-indigo-500, .border-indigo-600, .border-pink-500 { border-color: var(--brand) !important; }

/* Soft gradient sections (hero backgrounds etc.) */
.from-purple-50 { --tw-gradient-from: var(--brand-tint) !important; }
.from-pink-100, .from-pink-50 { --tw-gradient-from: var(--brand-tint) !important; }
.via-purple-50, .via-pink-50 { --tw-gradient-via: #F8F6FF !important; }
.to-pink-50, .to-purple-50, .to-indigo-50 { --tw-gradient-to: #FBFAFF !important; }