/* Color hierarchy only. Keep all layout, typography, and interaction rules intact. */
:root {
  --hierarchy-canvas: color-mix(in srgb, var(--primary) 6%, var(--bg-dark));
  --hierarchy-card: color-mix(in srgb, var(--primary) 2%, var(--bg-card));
  --hierarchy-heading: var(--tone-wash-2);
  --hierarchy-module: var(--tone-wash-3);
  --hierarchy-selected: var(--tone-wash-4);
  --hierarchy-border: var(--tone-border);
  --hierarchy-ink: var(--tone-ink);
}
:root.dark-theme {
  --hierarchy-canvas: var(--bg-dark);
  --hierarchy-card: var(--tone-wash-1);
  --hierarchy-module: var(--tone-wash-2);
}

/* Outer canvas, navigation, and the current location form separate color levels. */
.lab-shell .lab-content,
.app:has(> .workbench-home),
.app:has(> .applications-page) { background-color: var(--hierarchy-canvas); }
.lab-shell .lab-nav { background-color: var(--tone-navigation); }
.lab-shell .lab-topbar,
.app .m-navbar,
.app .m-tabbar { background-color: var(--hierarchy-heading); }
.lab-shell .lab-nav .lab-nav-item.active,
.lab-shell .lab-nav .lab-nav-group-heading .lab-nav-item.active,
.lab-shell .lab-nav .lab-subnav .selected {
  background-color: var(--hierarchy-selected);
  color: var(--hierarchy-ink);
}
.lab-shell .lab-nav .lab-nav-item.active > svg { color: var(--hierarchy-ink); }

/* Module entry > section heading > reading body. All use the current theme's hue. */
:is(.lab-shell,.app) .wb .wb-module-card,
:is(.lab-shell,.app) .wb.applications-page .wb-app-card {
  background-color: var(--hierarchy-module);
  border-color: var(--hierarchy-border);
}
:is(.lab-shell,.app) .wb .wb-module-card:hover,
:is(.lab-shell,.app) .wb.applications-page .wb-app-card:hover {
  background-color: var(--hierarchy-selected);
  border-color: var(--primary);
}
:is(.lab-shell,.app) .wb .wb-panel {
  background-color: var(--hierarchy-card);
  border-color: var(--hierarchy-border);
}
:is(.lab-shell,.app) .wb .wb-panel-heading,
:is(.lab-shell,.app) .wb .wb-metrics,
:is(.lab-shell,.app) .wb .wb-metric {
  background-color: var(--hierarchy-heading);
}
:is(.lab-shell,.app) .wb .wb-panel-heading h2,
:is(.lab-shell,.app) .wb .wb-metric strong { color: var(--hierarchy-ink); }
:is(.lab-shell,.app) .wb .wb-ai { background-color: var(--tone-wash-1); }
:is(.lab-shell,.app) .wb .wb-tabs button.active,
:is(.lab-shell,.app) .wb .wb-overview-tabs button.active,
:is(.lab-shell,.app) .wb .wb-filters button.active {
  background-color: var(--hierarchy-selected);
  color: var(--hierarchy-ink);
  border-color: var(--primary);
}

/* Existing business cards keep their shapes; only summaries and headers deepen. */
.lab-shell .lab-content :is(.project-card,.team-card,.report-card,.feature-card,.meeting-card,.gm-card) {
  background-color: var(--hierarchy-card);
  border-color: var(--hierarchy-border);
}
.lab-shell .lab-content :is(.project-card,.team-card,.report-card,.feature-card,.meeting-card,.gm-card):hover {
  background-color: var(--tone-wash-2);
}
.lab-shell .lab-content :is(.stat-card,.metric-card,.insight-tile,.detail-insight,.wp-insight,.kanban-insight,.gantt-insight,.org-kpi,.stat-tile,.hero-stat,.compute-stat,.skill-stat,.meeting-stat),
.lab-shell .lab-content :is(.filter-bar,.summary-strip,.gm-hero-main,.overview-panel,.setup-step,.form-live-panel),
.lab-shell .lab-content .el-card__header,
.lab-shell .lab-content .project-card > .card-header {
  background-color: var(--hierarchy-heading);
  border-color: var(--hierarchy-border);
}
.lab-shell .lab-content .el-table th.el-table__cell {
  background-color: var(--hierarchy-module);
  color: var(--hierarchy-ink);
}
.lab-shell .lab-content .chat-header,
.lab-shell .lab-content .history-sidebar { background-color: var(--hierarchy-heading); }

/* Library navigation and rows are distinct; document contents keep their colors. */
:is(.lab-shell,.app) .rd-page:not(.rd-open) .dc-library-sidebar {
  background-color: var(--hierarchy-heading);
}
:is(.lab-shell,.app) .rd-page:not(.rd-open) .dc-library-row {
  background-color: var(--hierarchy-card);
}
:is(.lab-shell,.app) .rd-page:not(.rd-open) .dc-library-row:hover {
  background-color: var(--hierarchy-heading);
}
:is(.lab-shell,.app) .rd-page .dc-library-sidebar button.active {
  background-color: var(--hierarchy-selected);
  color: var(--hierarchy-ink);
}

/* Mobile page headings, summary sections, and content follow the same hierarchy. */
.app .mobile-page-heading,
.app .profile-page .profile-page__header,
.app .van-tabs__nav { background-color: var(--hierarchy-heading); }
.app :is(.pm-projects,.meeting-index,.agent-page) :is(.project-card,.meeting-card,.agent-card) {
  background-color: var(--hierarchy-card);
  border-color: var(--hierarchy-border);
}
.app .van-tab--active { color: var(--hierarchy-ink); }