:root {
  color-scheme: light only;
  --pink-blue-pink: #e7a1b7;
  --pink-blue-rose: #c87894;
  --pink-blue-blue: #69d8e8;
  --pink-blue-sky: #dff8fc;
  --pink-blue-cream: #fffaf7;
  --pink-blue-ink: #251820;
  --blue: #55cfe2;
  --royal: #2fa8c2;
  --purple: #dd68a0;
  --violet: #e878a8;
  --orange: #e5a3b6;
  --green: #3fc7b1;
  --navy: #251820;
  --ink: #251820;
  --soft: #fff6fa;
  --line: #ecdde5;
  --grad: linear-gradient(120deg, #dda0b3 0%, #dc6c9f 50%, #67d8e8 100%);
}

html, body {
  background-color: var(--pink-blue-cream);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Manrope, system-ui, sans-serif;
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(82, 205, 225, .42);
  outline-offset: 2px;
}

.brand img, .gate-logo img { object-fit: contain; }
.brand b, .gate-brand h1 { color: var(--pink-blue-ink); }
.brand b span, .gate-brand h1 span { color: var(--pink-blue-rose); }

.submit, .primary, .retailer-primary, .add, button[type="submit"] {
  background-image: var(--grad);
}

@media (prefers-color-scheme: dark) {
  html, body { color-scheme: light; background: var(--pink-blue-cream); color: var(--pink-blue-ink); }
}

/* Pink & Blue public identity */
.site-header .brand span { color: #fff; font-weight: 750; letter-spacing: -.045em; }
.site-header .brand span b { color: #e8adc0; }
.site-header .brand img { filter: none !important; }
.site-header .brand:has(.brand-lockup), .footer-brand:has(.brand-lockup) { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
.site-header .brand-lockup { height: 58px !important; width: 190px !important; object-fit: contain !important; }
.footer-brand .brand-lockup { height: 64px !important; width: 220px !important; object-fit: contain !important; }
.hero-shop { background: linear-gradient(120deg, #35192a, #a9667f 52%, #48bccc) !important; }
.city-hero:before {
  background: radial-gradient(ellipse at 12% 3%, rgba(255,250,247,.96) 0%, rgba(255,239,246,.86) 15%, rgba(255,239,246,0) 34%), linear-gradient(90deg, rgba(37,17,30,.88) 0%, rgba(153,78,107,.70) 34%, rgba(79,190,207,.16) 68%, rgba(37,24,32,.10) 100%) !important;
}
.hero-shop .eyebrow, .hero-shop h1, .hero-shop .hero-lead, .hero-shop .trust-line { color: #fff; }
.hero-shop .eyebrow, .hero-shop h1, .hero-shop .hero-lead { text-shadow: 0 2px 18px rgba(42,24,34,.58), 0 1px 2px rgba(42,24,34,.72); }
.site-header nav a, .site-header .header-action { text-shadow: 0 1px 10px rgba(42,24,34,.54); }
.hero-shop h1 em { background: linear-gradient(90deg, #e9b1c2, #8be8f2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shopping-tags span { background: rgba(242, 105, 160, .22) !important; border-color: rgba(255, 181, 209, .36) !important; }
.role-actions { background: linear-gradient(135deg, rgba(213, 75, 137, .5), rgba(48, 158, 180, .36)) !important; border-color: rgba(255, 195, 218, .38) !important; }
.role-actions a { background: rgba(255, 255, 255, .12) !important; }
.role-actions a:before { background: linear-gradient(145deg, #de91aa, #54ccdf) !important; }
.hero-shop .trust-line a { background: rgba(228, 91, 150, .28) !important; border-color: rgba(255, 187, 213, .36) !important; }
.hero-market { background: rgba(40, 18, 31, .34) !important; }
.closing, .continent, .africa-map { background: linear-gradient(125deg, #d27f9b, #e0a5b7 48%, #59cfe0) !important; }
.role-card.customer { background: linear-gradient(145deg, #d887a2, #61d1e1) !important; }
.role-card.retailer { background: #fff0f6 !important; }
.role-card.driver, .platform, footer { background: #281a22 !important; }

/* Pink & Blue authentication gateway */
body:not(.auth-open) { background: linear-gradient(135deg, #edb7c8 0%, #f7c8da 48%, #78dce9 100%) !important; }
body.auth-open {
  background: linear-gradient(135deg, #4a3029 0%, #bd557f 38%, #ee8fb2 68%, #67ced8 100%) fixed !important;
}
.auth-open .register-card { background: rgba(255,250,247,.97) !important; }
.auth-open .role-tabs { background: #f8eaf0 !important; }
.auth-open .role-tabs button.active { background: #fff !important; color: #bf7891 !important; }
.auth-open input, .auth-open select, .auth-open textarea { border-color: #ead3dc !important; background: #fffaf8 !important; }
.auth-open .back-link, .auth-open>header .brand b { color: #fff !important; }
.gate-glow-one { background: #61d7e8 !important; }
.gate-glow-two { background: #d97f9f !important; }
.gate-logo { background: transparent !important; border: 0 !important; box-shadow: none !important; height: 112px !important; width: 144px !important; }
.gate-logo img { height: 108px !important; width: 124px !important; filter: drop-shadow(0 18px 28px rgba(78, 29, 52, .22)); }
.gate-brand h1 { color: #2a1822 !important; }
.gate-brand h1 span { color: #b96f8a !important; }
.gate-brand p, .gate-launch, .gate-roles { color: #38212d !important; }
.gate-brand p b { color: #38212d !important; }
.gate-secondary { background: rgba(255,255,255,.24) !important; border-color: rgba(255,255,255,.62) !important; color: #2a1822 !important; }
.gate-primary { color: #2a1822 !important; }
.gate-primary b { background: #fff0f6 !important; color: #bd728d !important; }

/* Shared app and portal surfaces */
.sidebar, .admin-side { background: #34241f !important; }
.sidebar nav button.active, .admin-side nav button.active {
  background: linear-gradient(100deg, rgba(235,112,164,.28), rgba(84,202,214,.24)) !important;
  border-color: #ec7cac !important;
}
.stat small, .eyebrow, .card-head button, .top>div>p, .admin-main header>div>small { color: #b9748c !important; }
.live-pill, .verified, .status.active { color: #168c96 !important; border-color: #55cbd6 !important; }
.admin-card, .retailer-card, .card, .stat { border-color: #eadde3 !important; }
.retailer-primary, .submit, .primary, .button-primary {
  background: linear-gradient(110deg, #c87894, #ef8eaf 54%, #57cbd6) !important;
}

@media (max-width: 1100px) {
  .city-hero:before { background: radial-gradient(ellipse at 15% 2%, rgba(255,250,247,.96) 0%, rgba(255,239,246,.82) 14%, rgba(255,239,246,0) 31%), linear-gradient(180deg, rgba(45,18,33,.84), rgba(176,91,122,.62) 48%, rgba(84,205,223,.12) 78%) !important; }
}

/* Exact Pink & Blue customer identity: day-only, approved colours only. */
.theme-toggle, [data-theme-toggle] { display: none !important; }
html[data-theme="night"] { color-scheme: light !important; }
html[data-theme="night"] body,
html[data-theme="night"] .app { background: #fffaf7 !important; color: #251820 !important; }
.app {
  background: linear-gradient(180deg, #fffaf7 0, #fff0f6 250px, #eefcfc 620px, #fffaf7 100%) !important;
}
.app:before {
  background: radial-gradient(circle at 8% 9%, rgba(238,121,170,.20), transparent 32%), radial-gradient(circle at 92% 20%, rgba(105,216,232,.20), transparent 34%) !important;
}
.topbar,
html[data-theme="night"] .topbar {
  background: linear-gradient(110deg, rgba(255,250,247,.98), rgba(255,239,246,.97), rgba(231,250,250,.97)) !important;
  border-color: rgba(217,87,145,.16) !important;
  grid-template-columns: minmax(128px, 158px) minmax(0,1fr) 40px !important;
}
.app-brand { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: 48px !important; justify-content: flex-start !important; padding: 0 !important; width: 100% !important; }
.app-brand img { filter: none !important; height: auto !important; max-height: 48px !important; object-fit: contain !important; object-position: left center !important; width: 100% !important; }
.topbar .location { background: rgba(255,255,255,.72) !important; border: 1px solid rgba(105,216,232,.30) !important; }
.avatar { background: linear-gradient(135deg, #e7a1b7, #c87894 58%, #69d8e8) !important; box-shadow: 0 6px 16px rgba(111,53,77,.20) !important; }
.greeting { background: linear-gradient(90deg, #2fbecb, #c87894 68%, #3a2822) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.search-box { background: linear-gradient(#fff,#fff) padding-box, linear-gradient(100deg,#69d8e8,#e7a1b7,#c87894) border-box !important; border: 3px solid transparent !important; }
.category, .store-card, .order-card, .product, .nearby-map-card, .menu-item { background-color: rgba(255,255,255,.94) !important; border-color: rgba(217,87,145,.16) !important; }
.bottom-nav { background: rgba(255,250,247,.97) !important; border-color: rgba(217,87,145,.18) !important; }
.bottom-nav button { color: #6f625f !important; }
.bottom-nav button.active { color: #c87894 !important; }
.bottom-nav button.active i { background: linear-gradient(135deg,#f7afca,#69d8e8) !important; color: #3a2822 !important; }
@media (max-width: 560px) {
  .topbar { grid-template-columns: minmax(112px, 138px) minmax(0,1fr) 38px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .app-brand { height: 43px !important; }
  .app-brand img { max-height: 43px !important; }
}