:root {
  --sp-brand-primary: #4f46e5;
  --sp-brand-accent: #10b981;
  --sp-brand-primary-text: #ffffff;
  --sp-brand-accent-text: #ffffff;
  --sp-brand-sidebar-bg: #0f172a;
  --sp-brand-sidebar-footer: #0b1120;
  --sp-brand-sidebar-text: #f8fafc;
  --sp-brand-sidebar-muted: #94a3b8;
  --sp-brand-footer-text: #f8fafc;
  --sp-brand-nav-active: #4f46e5;
  --sp-brand-primary-soft: #eef2ff;
  --sp-brand-accent-soft: #ecfdf5;
  --sp-brand-primary-border: #c7d2fe;
  --sp-brand-accent-border: #a7f3d0;
}

/* Utility classes (work with or without Tailwind brand.*) */
.sp-bg-primary {
  background-color: var(--sp-brand-primary) !important;
  color: var(--sp-brand-primary-text) !important;
}
.sp-bg-accent {
  background-color: var(--sp-brand-accent) !important;
  color: var(--sp-brand-accent-text) !important;
}
.sp-text-primary {
  color: var(--sp-brand-primary) !important;
}
.sp-text-accent {
  color: var(--sp-brand-accent) !important;
}
.sp-border-primary {
  border-color: var(--sp-brand-primary-border) !important;
}
.sp-border-accent {
  border-color: var(--sp-brand-accent-border) !important;
}
.sp-bg-primary-soft {
  background-color: var(--sp-brand-primary-soft) !important;
}
.sp-bg-accent-soft {
  background-color: var(--sp-brand-accent-soft) !important;
}

/* App-wide remap when custom brand is active */
[data-brand-scope][data-brand-active='true'] .bg-indigo-600,
[data-brand-scope][data-brand-active='true'] .bg-indigo-700,
[data-brand-scope][data-brand-active='true'] .hover\:bg-indigo-700:hover,
[data-brand-scope][data-brand-active='true'] .bg-slate-900,
[data-brand-scope][data-brand-active='true'] .hover\:bg-slate-800:hover {
  background-color: var(--sp-brand-primary) !important;
  color: var(--sp-brand-primary-text) !important;
}

[data-brand-scope][data-brand-active='true'] .text-indigo-600,
[data-brand-scope][data-brand-active='true'] .text-indigo-700,
[data-brand-scope][data-brand-active='true'] .text-indigo-800,
[data-brand-scope][data-brand-active='true'] .text-indigo-500 {
  color: var(--sp-brand-primary) !important;
}

[data-brand-scope][data-brand-active='true'] .bg-indigo-50,
[data-brand-scope][data-brand-active='true'] .bg-indigo-50\/50,
[data-brand-scope][data-brand-active='true'] .bg-indigo-50\/60,
[data-brand-scope][data-brand-active='true'] .hover\:bg-indigo-50:hover,
[data-brand-scope][data-brand-active='true'] .hover\:bg-indigo-50\/50:hover {
  background-color: var(--sp-brand-primary-soft) !important;
}

[data-brand-scope][data-brand-active='true'] .border-indigo-100,
[data-brand-scope][data-brand-active='true'] .border-indigo-200,
[data-brand-scope][data-brand-active='true'] .border-indigo-300,
[data-brand-scope][data-brand-active='true'] .border-indigo-500,
[data-brand-scope][data-brand-active='true'] .ring-indigo-100,
[data-brand-scope][data-brand-active='true'] .hover\:border-indigo-200:hover,
[data-brand-scope][data-brand-active='true'] .hover\:border-indigo-300:hover {
  border-color: var(--sp-brand-primary-border) !important;
}

[data-brand-scope][data-brand-active='true'] .bg-emerald-400,
[data-brand-scope][data-brand-active='true'] .bg-emerald-500,
[data-brand-scope][data-brand-active='true'] .bg-emerald-600,
[data-brand-scope][data-brand-active='true'] .bg-emerald-700,
[data-brand-scope][data-brand-active='true'] .hover\:bg-emerald-700:hover {
  background-color: var(--sp-brand-accent) !important;
  color: var(--sp-brand-accent-text) !important;
}

[data-brand-scope][data-brand-active='true'] .text-emerald-500,
[data-brand-scope][data-brand-active='true'] .text-emerald-600,
[data-brand-scope][data-brand-active='true'] .text-emerald-700,
[data-brand-scope][data-brand-active='true'] .text-emerald-900 {
  color: var(--sp-brand-accent) !important;
}

[data-brand-scope][data-brand-active='true'] .bg-emerald-50,
[data-brand-scope][data-brand-active='true'] .bg-emerald-50\/60,
[data-brand-scope][data-brand-active='true'] .bg-emerald-50\/70,
[data-brand-scope][data-brand-active='true'] .hover\:bg-emerald-50:hover {
  background-color: var(--sp-brand-accent-soft) !important;
}

[data-brand-scope][data-brand-active='true'] .border-emerald-100,
[data-brand-scope][data-brand-active='true'] .border-emerald-200,
[data-brand-scope][data-brand-active='true'] .border-emerald-300,
[data-brand-scope][data-brand-active='true'] .border-emerald-400,
[data-brand-scope][data-brand-active='true'] .border-emerald-500 {
  border-color: var(--sp-brand-accent-border) !important;
}

[data-brand-scope][data-brand-active='true'] .from-emerald-400,
[data-brand-scope][data-brand-active='true'] .from-emerald-500 {
  --tw-gradient-from: var(--sp-brand-accent) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

[data-brand-scope][data-brand-active='true'] .to-teal-400,
[data-brand-scope][data-brand-active='true'] .to-teal-500 {
  --tw-gradient-to: color-mix(in srgb, var(--sp-brand-accent) 75%, #0d9488) var(--tw-gradient-to-position) !important;
}

[data-brand-scope][data-brand-active='true'] .shadow-emerald-100\/50,
[data-brand-scope][data-brand-active='true'] .shadow-indigo-200,
[data-brand-scope][data-brand-active='true'] .shadow-indigo-200\/60 {
  --tw-shadow-color: color-mix(in srgb, var(--sp-brand-accent) 35%, transparent) !important;
}

[data-brand-scope][data-brand-active='true'] .group-hover\:bg-indigo-600.group:hover,
[data-brand-scope][data-brand-active='true'] .group-hover\:text-indigo-600.group:hover .group-hover\:text-indigo-600,
[data-brand-scope][data-brand-active='true'] .group-hover\:border-indigo-300.group:hover {
  background-color: var(--sp-brand-primary) !important;
  color: var(--sp-brand-primary-text) !important;
  border-color: var(--sp-brand-primary-border) !important;
}