/* Pastel asset categories, shared by selectors and the project title bands. */
.opportunity-cards [data-category],
.project-card[data-category] {
  --op-band-accent: #8b7bc5;
  --op-band-fill: #ded6f6;
  --op-band-ink: #352d4b;
  --op-band-muted: #574d6d;
}
.opportunity-cards [data-category=tangible],
.project-card[data-category=tangible] {
  --op-band-accent: #789dc9;
  --op-band-fill: #d8e7fa;
  --op-band-ink: #263f59;
  --op-band-muted: #465e77;
}
.opportunity-cards [data-category=intangible],
.project-card[data-category=intangible] {
  --op-band-accent: #87ad7c;
  --op-band-fill: #e0efd7;
  --op-band-ink: #30482e;
  --op-band-muted: #50684c;
}
.opportunity-cards [data-category=investment],
.project-card[data-category=investment] {
  --op-band-accent: #cb9b89;
  --op-band-fill: #f7e2d9;
  --op-band-ink: #573b33;
  --op-band-muted: #76594e;
}
/* Keep the existing card geometry and use the reference palette for the full face. */
:root .category-tabs.opportunity-cards [data-slot=tabs-trigger][data-category] {
  --tab-color: var(--op-band-accent);
  --category-surface: var(--op-band-fill);
  --category-text: var(--op-band-ink);
  --category-muted: var(--op-band-muted);
  --category-border: color-mix(in srgb, var(--op-band-accent) 28%, transparent);
  --category-edge: var(--op-band-accent);
  --category-highlight: #ffffff70;
  background: var(--op-band-fill);
  color: var(--op-band-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root .category-tabs.opportunity-cards [data-slot=tabs-trigger][data-active] {
  border-color: var(--op-band-accent);
  box-shadow: inset 0 0 0 1px var(--op-band-accent), 0 6px 20px var(--category-shadow);
}
:root .category-tabs.opportunity-cards [data-slot=tabs-trigger]::before {
  background: none;
}
/* Project surfaces stay solid; photography and its legibility overlay are unchanged. */
:root[data-liquid-glass] .project-track .project-card[data-category] {
  background: #18232b;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-liquid-glass][data-theme=light] .project-track .project-card[data-category] {
  background: #fff;
}
:root .project-track .project-card[data-category] .card-compact {
  background: transparent;
}
/* Monopoly-inspired top edge: no extra height or overlap with the labels. */
.category-tabs.opportunity-cards .category-color-band {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 9px;
  border-radius: 17px 17px 3px 3px;
  background: color-mix(in srgb, var(--op-band-fill) 70%, var(--op-band-accent));
  box-shadow: inset 0 1px 0 #ffffff80;
  pointer-events: none;
}

/* Solid title bands retain each card's current measurements. */
:root .project-card[data-category] .token-market-header,
:root .project-card[data-category] .card-compact-top::before {
  background: var(--op-band-fill);
  box-shadow: inset 0 1px 0 #ffffffba, inset 0 -1px 0 #ffffff4d, 0 3px 12px #1524380a;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root .project-card[data-category] .token-market-header {
  position: relative;
  color: var(--op-band-ink);
  border-bottom-color: color-mix(in srgb, var(--op-band-accent) 34%, transparent);
}
:root .project-card[data-category] .token-market-name > span {
  color: var(--op-band-muted);
}
:root .project-card[data-category] .token-market-header .change-up { color: #06442f; }
:root .project-card[data-category] .token-market-header .change-down { color: #74162d; }
:root .project-card[data-category] .token-market-header :is(.change-flat, .change-unavailable) { color: var(--op-band-muted); }
:root .project-card[data-category] .token-market-header .token-change > small { opacity: 1; }
:root .project-card[data-category] .card-compact-top {
  position: relative;
  isolation: isolate;
  color: var(--op-band-ink);
}
:root .project-card[data-category] .card-compact-top::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -27px -27px -18px;
  border-bottom: 1px solid color-mix(in srgb, var(--op-band-accent) 34%, transparent);
  pointer-events: none;
}
.project-card[data-category] :is(.token-market-header, .card-compact-top) .token-icon {
  box-shadow: inset 0 0 0 1px #ffffff9c, 0 2px 8px #2d466019;
}
@media (max-width: 760px) {
  :root .project-card[data-category] .card-compact-top::before { inset: -22px -22px -18px; }
}
@media (forced-colors: active) {
  :root .category-tabs.opportunity-cards [data-slot=tabs-trigger][data-category] {
    --category-text: CanvasText;
    --category-muted: CanvasText;
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
  }
  :root .category-tabs.opportunity-cards [data-slot=tabs-trigger][data-active] {
    outline: 2px solid Highlight;
    outline-offset: -3px;
    box-shadow: none;
  }
  :root .project-card[data-category] .token-market-header,
  :root .project-card[data-category] .card-compact-top::before,
  .category-tabs.opportunity-cards .category-color-band { background: Canvas; box-shadow: none; border-bottom: 1px solid CanvasText; }
  :root .project-card[data-category] :is(.token-market-header, .card-compact-top),
  :root .project-card[data-category] .token-market-name > span,
  :root .project-card[data-category] .token-market-header .token-change { color: CanvasText; }
}