:root {
  --economics: #0c7b60;
  --ai: #4b3fa8;
  --life: #a4461f;
  --politics: #842164;
  --wife: #a55e05;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --economics: #3ba888;
    --ai: #8980e8;
    --life: #d8743a;
    --politics: #cf4eb6;
    --wife: #ff9300;
  }
}

:root[data-theme="dark"] {
  --economics: #3ba888;
  --ai: #8980e8;
  --life: #d8743a;
  --politics: #cf4eb6;
  --wife: #ff9300;
}

.topic--economics { --topic: var(--economics); --sel: var(--economics); }
.topic--ai { --topic: var(--ai); --sel: var(--ai); }
.topic--life { --topic: var(--life); --sel: var(--life); }
.topic--politics { --topic: var(--politics); --sel: var(--politics); }
.topic--wife { --topic: var(--wife); --sel: var(--wife); }

/* The "All" chip and the Network link blend every subject's color. */
.chip--all::before,
.chip--all:hover::before,
.chip--all[aria-current="page"]::before {
  background: conic-gradient(var(--economics) 0% 20%, var(--ai) 20% 40%, var(--life) 40% 60%, var(--politics) 60% 80%, var(--wife) 80% 100%);
}

.nav-link--network::after {
  background: linear-gradient(90deg, var(--economics), var(--ai), var(--life), var(--politics), var(--wife));
}