/* Website brand theme. Loaded after legacy component styles; layout and
   functional status colors remain owned by styles.css. */
:root {
  --brand-black: #161616;
  --brand-deep: #030403;
  --brand-cream: #e3dfba;
  --brand-light: #ece9e1;
  --brand-white: #f2f3f1;
  --brand-muted: #a2a49b;
  --theme-background: var(--brand-light);
  --theme-card: var(--brand-white);
  --theme-text: var(--brand-black);
  /* The supplied muted color is reserved for dark surfaces. */
  --theme-muted: color-mix(in srgb, var(--brand-black) 70%, var(--brand-light));
  --theme-border: color-mix(in srgb, var(--brand-black) 23%, var(--brand-light));
  --theme-control-border: color-mix(in srgb, var(--brand-black) 52%, var(--brand-white));
  --theme-shadow: 0 10px 28px rgb(3 4 3 / 7%);
  --theme-primary: var(--brand-cream);
  --theme-primary-hover: var(--brand-light);
  --theme-secondary: var(--brand-black);
  --theme-secondary-hover: var(--brand-deep);
  --theme-focus: var(--brand-black);
}

/* Bridge existing component variables without changing their markup. */
body, :root body:is(.role-admin, .role-agent, .role-supplier, .role-customer),
body[data-preview-role] {
  --bg: var(--theme-background);
  --panel: var(--theme-card);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-border);
  --soft: var(--brand-light);
  --green: var(--brand-black);
  --dark: var(--brand-black);
  --cust-green: var(--brand-black);
  --cust-green-dark: var(--brand-black);
  --cust-cream: var(--brand-light);
  --cust-card: var(--theme-card);
  --cust-line: var(--theme-border);
  --cust-shadow: var(--theme-shadow);
  --mcc-charcoal: var(--brand-black);
  --mcc-charcoal-2: var(--brand-deep);
  --mcc-gold: var(--brand-cream);
  --mcc-gold-soft: var(--brand-cream);
  --mcc-cream: var(--brand-light);
  --mcc-cream-2: var(--brand-cream);
  --mcc-forest: var(--brand-black);
  --mcc-white: var(--brand-white);
  background: var(--theme-background);
  color: var(--theme-text);
}
:root body .sidebar {
  background: var(--brand-black);
  color: var(--brand-white);
  --theme-focus: var(--brand-cream);
}
:root body .sidebar .nav { color: var(--brand-white); background: transparent; }
:root body .sidebar .nav:hover { background: var(--brand-deep); color: var(--brand-cream); }
:root body .sidebar .nav.active { background: var(--brand-cream); color: var(--brand-black); }
:root body .sidebar :is(.brand small, .preview span, .role-switcher small, .light) {
  color: var(--brand-muted);
}
:root body .sidebar :is(.preview, .role-switcher, .signed-in) {
  background: var(--brand-deep); border-color: var(--brand-muted);
}
:root body .sidebar :is(.role-switcher label, .signed-in strong) { color: var(--brand-white); }
:root body .sidebar .nav.active .nav-count { color: var(--brand-black); }
:root body .sidebar .mark { background: var(--brand-white); }
:root body main { min-width: 0; }
:root body:is(.role-customer, [data-preview-role="customer"]) main {
  background: var(--brand-light);
}
:root body:is(.role-customer, [data-preview-role="customer"]) .topbar {
  background: var(--brand-light); color: var(--brand-black);
}

/* All ordinary actions share states. Danger/validation styles are not recolored. */
:root body :is(.primary, .open-btn, .hero-btn, .customer-explore-day) {
  background: var(--theme-primary); color: var(--brand-black);
  border: 1px solid var(--theme-control-border);
  box-shadow: none;
}
:root body :is(.primary, .open-btn, .hero-btn, .customer-explore-day):hover:not(:disabled) {
  background: var(--theme-primary-hover); color: var(--brand-black);
  border-color: var(--brand-black);
}
:root body :is(.secondary, .back, .customer-back) {
  background: var(--theme-secondary); color: var(--brand-white);
  border: 1px solid var(--brand-black);
}
:root body :is(.secondary, .back, .customer-back):hover:not(:disabled) {
  background: var(--theme-secondary-hover); color: var(--brand-cream);
}
:root body :is(.primary, .secondary, .back, .open-btn, .hero-btn):active:not(:disabled) {
  box-shadow: inset 0 0 0 2px currentColor;
}
:root body :is(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 3px solid var(--theme-focus); outline-offset: 3px;
}
:root body :is(button, input, select, textarea):disabled {
  opacity: .6; cursor: not-allowed; box-shadow: none;
}
:root body :is(input, select, textarea) {
  background-color: var(--brand-white); color: var(--brand-black);
  border-color: var(--theme-control-border); accent-color: var(--brand-black);
}
:root body :is(input, textarea)::placeholder { color: var(--theme-muted); opacity: 1; }
:root body :is(.text-link-button, .supplier-product-read-more) { color: var(--brand-black); }
:root body :is(.auth-language, .portal-language-switcher) { background: var(--brand-light); border-color: var(--theme-border); }
:root body :is(.auth-language, .portal-language-switcher) button { color: var(--brand-black); }
:root body :is(.auth-language, .portal-language-switcher) button.active {
  background: var(--brand-black); color: var(--brand-white);
}

/* Neutral working surfaces, including the customer document/message/payment panels. */
:root body :is(.panel, .stat, .finance, .modal-card, .role-card, .portal-choice,
  .agent-stat-card, .agent-client-card, .agent-booking-card, .agent-catalog-card,
  .supplier-booking-card, .supplier-product-card, .builder-request-card,
  .customer-glance-grid > div, .customer-welcome, .customer-advisor-card,
  .customer-payment-history-row, .customer-payment-balance-summary > div) {
  background: var(--theme-card); border-color: var(--theme-border);
  color: var(--brand-black); box-shadow: var(--theme-shadow);
}
:root body .modal { background: rgb(3 4 3 / 65%); }
:root body .close { color: var(--theme-muted); }
:root body :is(.panel, .modal-card, .trip-card, .customer-day, .customer-trip-card,
  .agent-client-card, .agent-booking-card, .agent-catalog-card, .supplier-booking-card,
  .supplier-product-card, .customer-welcome, .customer-advisor-card) :is(h2, h3, h4) {
  color: var(--brand-black);
}
:root body :is(th, .customer-trip-datebox, .customer-trip-card-meta, .customer-day-head,
  .customer-free, .supplier-booking-details > div, .agent-business-summary,
  .role-note, .role-data-summary, .supplier-vehicle-pricing-fields, .supplier-child-pricing-fields) {
  background: var(--brand-light); color: var(--brand-black); border-color: var(--theme-border);
}
:root body :is(td, th) { border-color: var(--theme-border); }
:root body :is(.customer-item-type, .customer-time, .customer-location, .customer-free strong,
  .customer-glance-grid strong, .customer-advisor-kicker, .customer-advisor-powered,
  .agent-client-avatar, .eyebrow) { color: var(--brand-black); }
:root body .shared-planning-tab { background: var(--brand-light); color: var(--brand-black); border-color: var(--theme-control-border); }
:root body .shared-planning-tab.active { background: var(--brand-black); color: var(--brand-white); }

/* Website-like dark landmarks; content and day-by-day details stay light. */
:root body :is(.hero, .role-hero, .customer-hero, .customer-help, .customer-payment-balance-hero) {
  background: linear-gradient(120deg, var(--brand-black), var(--brand-deep));
  color: var(--brand-white); --theme-focus: var(--brand-cream);
}
:root body :is(.hero, .role-hero, .customer-hero, .customer-help, .customer-payment-balance-hero)
  :is(h2, h3, p, .customer-brand, .customer-intro) { color: var(--brand-white); }
:root body :is(.hero, .role-hero, .customer-hero, .customer-help, .customer-payment-balance-hero)
  :is(.eyebrow, .customer-kicker, .customer-subbrand, .light) { color: var(--brand-cream); }
:root body :is(.customer-logo-mark, .customer-badge, .customer-help-badge, .role-pill) {
  background: var(--brand-cream); color: var(--brand-black); border-color: var(--theme-border);
}
:root body .customer-advisor-card { --theme-focus: var(--brand-black); }
:root body .customer-advisor-card :is(strong, a) { color: var(--brand-black); }
:root body .customer-advisor-card :is(span, small) { color: var(--theme-muted); }
:root body :is(.customer-portal-heading, #customerItineraryBuilder .section-head,
  #customerSavedItineraries .section-head) {
  background: var(--brand-black); color: var(--brand-white); border-color: var(--brand-black);
  --theme-focus: var(--brand-cream);
}
:root body :is(.customer-portal-heading, #customerItineraryBuilder .section-head,
  #customerSavedItineraries .section-head) :is(h2, p, .eyebrow) { color: var(--brand-white); }
:root body .customer-trip-card::before { background: var(--brand-cream); }
:root body #customerSavedItineraries .builder-request-card::before { background: var(--brand-black); }
:root body .day-number, body.role-customer .day-number {
  background: var(--brand-black); color: var(--brand-white);
}
:root body .day-number :is(span, strong) { color: var(--brand-white); }
/* Existing itinerary rules use !important for surfaces; match only those properties. */
:root body .customer-day { background: var(--theme-card) !important; box-shadow: var(--theme-shadow) !important; }
:root body .customer-item { background: var(--theme-card) !important; border-color: var(--theme-border) !important; box-shadow: none !important; }
:root body .customer-item-booking { border-left-color: var(--brand-black) !important; }
:root body .customer-footer { background: var(--brand-light); color: var(--theme-muted); }
:root body .customer-footer strong { color: var(--brand-black); }
:root body .auth-gate { background: var(--brand-deep); }
:root body .auth-card { background: var(--brand-light); border-color: var(--theme-border); }
:root body .auth-brand small { color: var(--theme-muted); }

/* Status/error classes retain their original functional colors. Do not apply
   brand rules to .pill.status-*, .db.*, validation, or financial status labels. */

/* Some legacy customer views declare local variables rather than inheriting. */
#customerTrips, #customerItineraryBuilder, #customerSavedItineraries, #customerPreview {
  --cust-green: var(--brand-black);
  --cust-green-dark: var(--brand-black);
  --cust-cream: var(--brand-light);
  --cust-card: var(--theme-card);
  --cust-line: var(--theme-border);
  --cust-shadow: var(--theme-shadow);
  color: var(--brand-black);
}
:root body .customer-hero::after { background: none; }
:root body :is(.stat strong, .agent-stat-card strong, .agent-business-summary strong,
  .role-switcher select, .itinerary-weather-head h3, .customer-free .customer-kicker,
  .collaboration-banner h3, .customer-itinerary-payment-cta strong) { color: var(--brand-black); }
:root body :is(.collaboration-banner, .itinerary-weather-panel) {
  background: var(--brand-light); border-color: var(--theme-border); color: var(--brand-black);
}
:root body :is(.collaboration-banner, .customer-itinerary-payment-cta) .eyebrow {
  color: var(--theme-muted);
}
:root body :is(.customer-guide-launch, .customer-guide-head, .customer-guide-compose button,
  .customer-guide-msg.user span, .customer-guide-chips button.active) {
  background: var(--brand-black); color: var(--brand-white); border-color: var(--brand-cream);
  --theme-focus: var(--brand-cream);
}
:root body :is(.customer-guide-launch-icon, .customer-guide-action) {
  background: var(--brand-cream); color: var(--brand-black); border-color: var(--theme-control-border);
}
:root body :is(.customer-guide-panel, .customer-guide-body, .customer-guide-welcome,
  .customer-guide-msg.bot span, .customer-guide-compose, .customer-guide-panel footer) {
  background: var(--brand-white); color: var(--brand-black); border-color: var(--theme-border);
}
:root body :is(.customer-guide-chips button, .customer-guide-secondary, .customer-guide-custom-question) {
  background: var(--brand-light); color: var(--brand-black); border-color: var(--theme-control-border);
}
:root body .customer-guide-head span { color: var(--brand-cream); }
:root body .customer-guide-welcome strong { color: var(--brand-black); }
:root body .customer-guide-welcome span { color: var(--theme-muted); }
:root body .customer-guide-launch:hover { background: var(--brand-deep); color: var(--brand-cream); }
@media (max-width: 650px) {
  /* Keep existing navigation order, while preventing long labels from widening the page. */
  :root body .shell { grid-template-columns: minmax(0, 1fr); }
  :root body .sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root body .sidebar :is(.nav, .signed-in, .role-switcher) { min-width: 0; overflow-wrap: anywhere; }
  :root body .sidebar select { max-width: 100%; }
}
@media (forced-colors: active) {
  :root body .sidebar .nav.active { outline: 2px solid Highlight; }
  :root body :is(button, input, select, textarea, a, [tabindex]):focus-visible { outline-color: Highlight; }
}