/* Burgundy / ivory / sage. Pale sage is an accent, never body text on ivory. */
:root {
  --brand-burgundy: #702638;
  --brand-ivory: #faf7f0;
  --brand-sage: #a9b8a2;
  --brand-sage-text: #52664b;
  --brand-ink: #35232a;
  --brand-muted: #604b54;
  --gm-cream: var(--brand-ivory);
  --gm-paper: #fffdf8;
  --gm-green: var(--brand-burgundy);
  --gm-green-dark: #511b2a;
  --gm-red: var(--brand-burgundy);
  --gm-yellow: var(--brand-sage);
  --gm-ink: var(--brand-ink);
  --gm-muted: var(--brand-muted);
}

.bukingz-logo {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 156px;
  max-width: 34vw;
  aspect-ratio: 1400 / 390;
  color: var(--brand-burgundy);
  vertical-align: middle;
}
.bukingz-logo::before, .bukingz-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("./bukingz-wordmark.png") center / contain no-repeat;
  mask: url("./bukingz-wordmark.png") center / contain no-repeat;
}
.bukingz-logo::after { background: var(--brand-sage); clip-path: inset(0 73% 0 0); }
.brand-name > .bukingz-logo { width: 220px; max-width: calc(100vw - 84px); color: var(--brand-ivory); }
@media (max-width: 850px) { .brand-name > .bukingz-logo { width: 190px; } }

/* The selected landing-page preview, with readable small text. */
.premium-header { background: var(--brand-ivory) !important; }
.hero-primary { background: var(--brand-ivory) !important; color: var(--brand-burgundy) !important; box-shadow: none !important; }
.trust-strip { background: var(--brand-ivory) !important; border-color: var(--brand-sage) !important; }
.booking-stage { background: linear-gradient(145deg, var(--brand-sage), var(--brand-ivory)) !important; }
.booking-panel { background: #511b2a !important; }
.booking-panel .time-pill { background: var(--brand-sage) !important; color: #35232a !important; }
.booking-panel .service-avatar { background: var(--brand-sage) !important; color: #35232a !important; }
.booking-panel [class*="text-"][class*="/55"],
.welcome-hero [class*="text-"][class*="/65"] { color: var(--brand-ivory) !important; }
.business-stat p:last-child { color: var(--brand-ivory) !important; }
footer [class*="text-on-surface-variant/"] { color: var(--brand-muted) !important; }
.business-chart span:nth-child(odd) { background: var(--brand-ivory) !important; }
.welcome-hero .hero-secondary:hover { background: #511b2a !important; }

/* Form text and focus must remain visible on the pale surfaces. */
input::placeholder, textarea::placeholder { color: var(--brand-muted); opacity: 1; }
#service-search-input::placeholder { color: var(--brand-muted) !important; opacity: 1; }
:focus-visible { outline: 3px solid var(--brand-sage-text); outline-offset: 3px; }
body[data-gm-shell] :focus-visible { outline-color: var(--brand-sage-text) !important; }
.brand .brand-points span { color: var(--brand-ivory); }
.brand::before { opacity: .12; }
.brand h1 { font-weight: 800; }
.brand h1 em { color: var(--brand-ivory); }
.segment button:not(.active), .lead { color: var(--brand-muted); }
body[data-gm-page="bookings"] #bookings-tab-history:not(.tab-active),
body[data-gm-page="bookings"] #bookings-tab-upcoming:not(.tab-active) { color: var(--brand-ivory) !important; }

/* Alternate category tiles and dashboard cards need contrasting foregrounds. */
body[data-gm-page="home"] main section:nth-of-type(2) .flex.gap-6 > button:nth-child(even) > div span { color: var(--brand-ivory) !important; }
.bento-grid .luxury-card:nth-child(1) :is(.text-primary, .text-gold, .material-symbols-outlined),
.bento-grid .luxury-card:nth-child(5) :is(.text-primary, .text-gold, .material-symbols-outlined) { color: var(--brand-ivory) !important; }
.bento-grid .luxury-card:nth-child(2) .text-on-surface-variant { color: var(--brand-ink) !important; }
#my-services-tile-btn { color: var(--brand-ivory) !important; border-color: var(--brand-sage) !important; }
.view-toggle.bg-gold, .view-toggle.bg-gold:hover { color: var(--brand-ivory) !important; }
body[data-gm-page="profile"] .profile-option small,
body[data-gm-page="profile"] .notify-row small { color: var(--gm-muted) !important; }
body[data-gm-page="profile"] .profile-option { border-color: var(--gm-line); }
body[data-gm-page="profile"] .profile-option > i { color: var(--gm-green); }
body[data-gm-page="profile"] .option-icon { background: var(--brand-sage) !important; color: var(--brand-ink) !important; }
body[data-gm-page="home"] > main > section:first-child::before,
body[data-gm-page="home"] > main > section:first-child::after { opacity: .08; }
@media (max-width: 767px) {
  body[data-gm-page="home"] > header > div:first-child > .flex-col { display: none; }
  body[data-gm-page="home"] .gm-header-brand-home { left: 76px; transform: translateY(-50%); }
  body[data-gm-page="home"] .gm-header-brand-home .bukingz-logo { width: 110px; }
  body[data-gm-page="home"] > main > section:first-child::before,
  body[data-gm-page="home"] > main > section:first-child::after { display: none; }
}
@media (max-width: 380px) {
  body[data-gm-page="home"] .gm-header-brand-home { left: 68px; }
  body[data-gm-page="home"] .gm-header-brand-home .bukingz-logo { width: 84px; }
}

html[data-bookme-theme="light"] {
  --gm-cream: var(--brand-ivory);
  --gm-paper: #fffdf8;
  --gm-ink: var(--brand-ink);
  --gm-muted: var(--brand-muted);
}
html[data-bookme-theme="dark"] {
  --gm-cream: #24191e;
  --gm-paper: #33242b;
  --gm-ink: var(--brand-ivory);
  --gm-muted: #d6c8cd;
}
html[data-bookme-theme="dark"] body[data-gm-shell] .bukingz-logo { color: var(--brand-ivory); }

/* Surface tokens change in dark mode; text on burgundy must stay ivory. */
body[data-gm-shell]:not([data-gm-page="profile"]) > main > section:first-child,
.client-hero-copy h1,
body[data-gm-page="business"] main > section:first-of-type h2,
#my-services-btn,
.bento-grid .luxury-card:nth-child(1) h3,
.bento-grid .luxury-card:nth-child(5) h3 { color: var(--brand-ivory) !important; }
.bento-grid .luxury-card:nth-child(2) { color: var(--brand-ink) !important; }

html[data-bookme-theme="dark"] body:is([data-gm-shell], [data-gm-page="business"]) {
  background: #24191e !important;
  color: var(--brand-ivory) !important;
}
html[data-bookme-theme="dark"] body:is([data-gm-shell], [data-gm-page="business"]) :is(input, textarea)::placeholder { color: #d6c8cd !important; }
html[data-bookme-theme="dark"] body:is([data-gm-shell], [data-gm-page="business"]) > header {
  background: #33242b !important;
  color: var(--brand-ivory) !important;
}
html[data-bookme-theme="dark"] body:is([data-gm-shell], [data-gm-page="business"]) > header :is(a, button, .bukingz-logo, .material-symbols-outlined) { color: var(--brand-ivory) !important; }
html[data-bookme-theme="dark"] body:is([data-gm-shell], [data-gm-page="business"]) :is(.text-primary, .text-gold, .text-primary-container, .gold-accent, .profile-option > i) { color: var(--brand-sage) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="home"] main section:nth-of-type(2) .flex.gap-6 > button > span,
html[data-bookme-theme="dark"] body[data-gm-page="home"] main section > .flex :is(h2, button),
html[data-bookme-theme="dark"] body[data-gm-shell] main > section:not(:first-child) > h2,
html[data-bookme-theme="dark"] body[data-gm-shell] main > section:not(:first-child) > div > h2 { color: var(--brand-ivory) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="profile"] .option-icon { color: var(--brand-ink) !important; background: var(--brand-sage) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="business"] :is(.luxury-card, .glass-panel, [class*="bg-surface"], .gm-calendar-days-head, .gm-month-day) {
  background: #33242b !important;
  color: var(--brand-ivory) !important;
  border-color: #765b68 !important;
}
html[data-bookme-theme="dark"] body[data-gm-page="business"] .bento-grid .luxury-card:nth-child(1),
html[data-bookme-theme="dark"] body[data-gm-page="business"] .bento-grid .luxury-card:nth-child(5) { background: var(--brand-burgundy) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="business"] .bento-grid .luxury-card:nth-child(2) { background: var(--brand-sage) !important; color: var(--brand-ink) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="business"] .bento-grid .luxury-card:nth-child(2) .text-primary { color: var(--brand-burgundy) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="business"] .bento-grid .luxury-card:nth-child(2) h3 { color: var(--brand-ink) !important; }
html[data-bookme-theme="dark"] #logout-button,
html[data-bookme-theme="dark"] #gm-shell-logout { color: var(--brand-ivory) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="business"] .business-tabs a.bg-gold,
html[data-bookme-theme="dark"] body[data-gm-page="business"] .bento-grid .luxury-card:nth-child(2) .gold-accent { color: var(--brand-ink) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="business"] .gm-calendar-day-name { color: var(--brand-sage) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="business"] .gm-calendar-event { color: var(--brand-ink) !important; }
html[data-bookme-theme="dark"] body[data-gm-page="business"] .business-tabs a.bg-gold { background: var(--brand-sage) !important; }
body[data-gm-page="business"] button.bg-gold,
body[data-gm-page="business"] button.bg-primary { color: var(--brand-ivory) !important; }
html[data-bookme-theme="dark"] #service-search-input::placeholder { color: #d6c8cd !important; }
html[data-bookme-theme="dark"] body[data-gm-page="business"] .bento-grid .luxury-card:nth-child(3) .material-symbols-outlined,
html[data-bookme-theme="dark"] body[data-gm-page="business"] .bento-grid .luxury-card:nth-child(4) .material-symbols-outlined { color: var(--brand-sage) !important; }
html[data-bookme-theme="dark"] body[data-gm-shell] :focus-visible { outline-color: var(--brand-sage) !important; }