/* BigBazar brand palette — navy + orange, sampled from assets/logo.png.
 *
 * WHY THIS FILE EXISTS: the product pages load a PRECOMPILED tailwind.css and
 * this environment can't run `npm run build:css`, so brand-new colour classes
 * (bg-[#032872], text-navy-700, ...) simply would not exist. Instead this sheet
 * loads AFTER tailwind.css and remaps the palette the markup already uses:
 *
 *     teal   -> navy   #032872   (primary: headings, links, primary buttons)
 *     amber  -> orange #FC4804   (accent: badges, highlights, secondary CTA)
 *
 * Deliberately NOT remapped:
 *     green/emerald -> stays WhatsApp green (it signals WhatsApp, not brand)
 *     rose/red      -> stays red (discounts, errors, destructive)
 *     slate         -> stays neutral
 *
 * Anything new should use the CSS variables below rather than a Tailwind class.
 */
:root {
  --bb-navy: #032872;
  --bb-navy-700: #06205c;   /* darker: hover on navy buttons */
  --bb-navy-500: #1c4bb0;   /* lighter: focus rings, hover text */
  --bb-navy-50: #eef2fb;    /* tint: panel backgrounds */
  --bb-navy-100: #dbe4f7;
  --bb-navy-200: #c3d0ee;
  --bb-navy-300: #9db3e3;

  --bb-orange: #fc4804;
  --bb-orange-600: #e03d00;
  --bb-orange-400: #ff6a2b;
  --bb-orange-50: #fff2ec;
  --bb-orange-100: #ffd9c9;
  --bb-orange-200: #ffc3a8;

  --bb-ink: #0f172a;
}

/* ---- teal -> navy -------------------------------------------------------- */
.text-teal-600, .text-teal-700, .text-teal-800 { color: var(--bb-navy) !important; }
.hover\:text-teal-700:hover, .hover\:text-teal-800:hover { color: var(--bb-navy) !important; }
.group:hover .group-hover\:text-teal-700 { color: var(--bb-navy) !important; }

.bg-teal-600, .bg-teal-700, .bg-teal-800 { background-color: var(--bb-navy) !important; }
.hover\:bg-teal-700:hover, .hover\:bg-teal-800:hover { background-color: var(--bb-navy-700) !important; }
.group:hover .group-hover\:bg-teal-700 { background-color: var(--bb-navy-700) !important; }
.bg-teal-50 { background-color: var(--bb-navy-50) !important; }

.border-teal-100 { border-color: var(--bb-navy-100) !important; }
.border-teal-200 { border-color: var(--bb-navy-200) !important; }
.border-teal-300, .hover\:border-teal-300:hover { border-color: var(--bb-navy-300) !important; }
.border-teal-600, .border-teal-700 { border-color: var(--bb-navy) !important; }
.focus\:border-teal-600:focus, .focus\:border-teal-700:focus { border-color: var(--bb-navy) !important; }

/* ---- amber -> orange ----------------------------------------------------- */
.text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800 { color: var(--bb-orange) !important; }
.bg-amber-400 { background-color: var(--bb-orange) !important; }
.hover\:bg-amber-300:hover { background-color: var(--bb-orange-400) !important; }
.bg-amber-50 { background-color: var(--bb-orange-50) !important; }
.border-amber-100 { border-color: var(--bb-orange-100) !important; }
.border-amber-200 { border-color: var(--bb-orange-200) !important; }

/* Page wash: warm orange tint at the top fading to neutral, echoing the logo. */
.page-shell, .catalog-shell {
  background: radial-gradient(120% 60% at 50% 0%, var(--bb-orange-50) 0%, #f8fafc 44%) !important;
}