/* Fable rebrand alignment for utility pages (support, legal, listing, account flows).
   Loads after tailwind.css: swaps fonts and recolors legacy accents to the brand palette. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --brand: #7C3AED;
  --brand-deep: #6425D0;
  --brand-ink: #241056;
  --brand-soft: #EDE9FE;
  --rb-bg: #F8F7FC;
  --rb-ink: #221833;
}

body {
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3 {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif !important;
  letter-spacing: -0.02em;
}

/* page backgrounds */
.bg-gray-50, .bg-gray-100 { background-color: var(--rb-bg) !important; }

/* legacy blue accents -> brand purple */
.bg-blue-600 { background-color: var(--brand) !important; }
.hover\:bg-blue-700:hover { background-color: var(--brand-deep) !important; }
.text-blue-600 { color: var(--brand) !important; }
.text-blue-700, .hover\:text-blue-700:hover { color: var(--brand-deep) !important; }
.border-blue-600 { border-color: var(--brand) !important; }

/* legacy indigo accents -> brand purple */
.bg-indigo-600 { background-color: var(--brand) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--brand-deep) !important; }
.text-indigo-600 { color: var(--brand) !important; }

/* dark utility headers (profile, verify, unsubscribe, return) -> deep violet */
.bg-secondary { background-color: var(--brand-ink) !important; }

a:focus { outline-color: var(--brand) !important; }