/* Shared premium surface system: white primary sections with blue-gray alternates. */
:root {
  --pina-surface-primary: #FFFFFF;
  --pina-surface-alternate: #F1F5F9;
}

html body,
html body :where(.municipal-homepage,.about-page,.programs-page,.calendar-page,.tourism-page,.contact-page,.updates-page,.services-page) {
  background-color: var(--pina-surface-alternate) !important;
}

/* Primary content bands. */
html body :where(
  .about-section:not(.about-tint),
  .tourism-section:not(.tourism-section--tint),
  .contact-section:not(.contact-section--tint),
  .calendar-section,
  .programs-directory,
  .service-directory,
  .updates-main,
  .municipal-values-strip
) {
  background-color: var(--pina-surface-primary) !important;
}

/* Alternate content bands. */
html body :where(
  .about-tint,
  .tourism-section--tint,
  .contact-section--tint,
  .quick-info,
  .transparency-actions,
  .news-section,
  .news-portal-page,
  .news-article-page
) {
  background-color: var(--pina-surface-alternate) !important;
}

/* Homepage sequence. */
html body .municipal-homepage :where(.service-dock,.account-link-callout,.dashboard) {
  background-color: var(--pina-surface-primary) !important;
}
html body .municipal-homepage :where(.mayor-welcome,.home-content-columns,.civic-insights,.quick-info) {
  background-color: var(--pina-surface-alternate) !important;
}

/* Cards remain crisp white against alternate bands. */
html body :where(
  .about-panel,
  .mayor-corner,
  .official-card,
  .barangay-directory,
  .tourism-card,
  .travel-advisory,
  .contact-panel,
  .self-service-grid article,
  .calendar-main,
  .upcoming-card,
  .sync-card,
  .calendar-help,
  .facebook-posts,
  .facebook-post-card,
  .municipal-updates,
  .updates-calendar,
  .service-card,
  .service-item,
  .service-form-card,
  .program-card,
  .program-detail-content > section,
  .employee-form-card,
  .login-card
) {
  background-color: var(--pina-surface-primary) !important;
}

/* Portal workspaces use the same neutral canvas without altering their layouts. */
html body :where(.citizen-auth-page,.citizen-auth-content,.employee-subpage,.employee-dashboard-page) {
  background-color: var(--pina-surface-alternate) !important;
}

/* Administrative surfaces follow the same hierarchy. */
html body#page-top,
html body .content-wrapper,
html body .admin-auth-page,
html body .admin-auth-shell {
  background-color: var(--pina-surface-alternate) !important;
}
html body :where(.card,.admin-auth-card,.employee-card-grid > a,.requests-preview) {
  background-color: var(--pina-surface-primary) !important;
}

@media (prefers-contrast: more) {
  :root { --pina-surface-alternate: #E9EFF5; }
}