﻿/* London 2 Dhaka storefront theme — overrides CRM orange palette */
:root {
  --ink: #012169;
  --ink-soft: #1a3a7a;
  --teal: #C8102E;
  --teal-bright: #e11d48;
  --mist: #eef2f8;
  --fog: #f7f9fc;
  --brand-50: #fde8ec;
  --brand-100: #f9c5ce;
  --brand-200: #f39aaa;
  --brand-300: #ec6e84;
  --brand-400: #e33f5d;
  --brand-500: #C8102E;
  --brand-600: #a50d26;
  --brand-700: #820a1e;
  --brand-800: #5f0716;
  --brand-900: #3d0410;
  --color-brand-50: #fde8ec;
  --color-brand-100: #f9c5ce;
  --color-brand-200: #f39aaa;
  --color-brand-300: #ec6e84;
  --color-brand-400: #e33f5d;
  --color-brand-500: #C8102E;
  --color-brand-600: #a50d26;
  --color-brand-700: #820a1e;
  --color-brand-800: #5f0716;
  --color-brand-900: #3d0410;
  --font-heading: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Roboto", ui-sans-serif, system-ui, sans-serif;
}

html, body, #storefront-app {
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif !important;
}

body {
  background:
    radial-gradient(1200px 500px at 8% -8%, rgba(200, 16, 46, 0.08), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(1, 33, 105, 0.1), transparent 50%),
    linear-gradient(180deg, #f7f9fc 0%, #eef2f8 48%, #ffffff 100%) !important;
  color: #012169;
}

/* Remap brand utility classes */
.text-brand-400,.text-brand-500,.hover\:text-brand-500:hover { color: #C8102E !important; }
.text-brand-600,.hover\:text-brand-600:hover,.group:hover .group-hover\:text-brand-600 { color: #a50d26 !important; }
.text-brand-700 { color: #820a1e !important; }
.bg-brand-50,.hover\:bg-brand-50:hover { background-color: #fde8ec !important; }
.bg-brand-100 { background-color: #f9c5ce !important; }
.bg-brand-500,.hover\:bg-brand-500:hover { background-color: #C8102E !important; }
.bg-brand-600,.hover\:bg-brand-600:hover,.a.bg-brand-600 { background-color: #a50d26 !important; }
.bg-brand-700,.hover\:bg-brand-700:hover { background-color: #820a1e !important; }
.border-brand-300 { border-color: #ec6e84 !important; }
.border-brand-500,.hover\:border-brand-500:hover { border-color: #C8102E !important; }
.border-brand-600 { border-color: #a50d26 !important; }
.ring-brand-200 { --tw-ring-color: #f39aaa !important; }
.ring-brand-500,.focus\:ring-brand-500:focus { --tw-ring-color: #C8102E !important; }
.shadow-brand-500\/20,.shadow-brand-500\/30 { --tw-shadow-color: rgba(200,16,46,.3) !important; }
.from-brand-500 { --tw-gradient-from: #C8102E !important; }
.to-brand-600 { --tw-gradient-to: #a50d26 !important; }

/* Nav / announcement / footer L2D look */
#navbar {
  background: rgba(1, 33, 105, 0.96) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(16px);
}
#navbar, #navbar a, #navbar button, #navbar span, #navbar i { color: #fff !important; }
#navbar .text-slate-600, #navbar .text-slate-700, #navbar .text-dark-900 { color: rgba(255,255,255,0.9) !important; }
#navbar #search-container {
  border: 2px solid #C8102E !important;
  background: #fff !important;
}
#navbar #search-container input { color: #012169 !important; }
#navbar #cat-btn,
#navbar #search-container button[type="submit"],
#navbar .favorites-count-badge,
#navbar .cart-count-badge {
  background-color: #C8102E !important;
  color: #fff !important;
}
#navbar #cat-btn { border-right: 2px solid #C8102E !important; }
#header-announcement {
  background: linear-gradient(135deg, #C8102E 0%, #012169 100%) !important;
  color: #fff !important;
}

footer.bg-dark-900,
footer {
  background:
    radial-gradient(700px 240px at 100% 0%, rgba(200, 16, 46, 0.28), transparent 55%),
    linear-gradient(160deg, #012169 0%, #0a2a6e 55%, #011845 100%) !important;
  border-top: 4px solid #C8102E !important;
  color: rgba(255,255,255,0.85) !important;
}
footer h4, footer .text-white { color: #fff !important; }
footer a:hover { color: #ff6b81 !important; }
footer .text-slate-400 { color: rgba(255,255,255,0.72) !important; }

.hero-gradient {
  background: linear-gradient(135deg, rgba(1,33,105,0.08) 0%, #fff 55%) !important;
}

/* Primary CTAs */
.btn-brand,
button.bg-brand-600,
a.bg-brand-600 {
  background-color: #C8102E !important;
}
