/* ==========================================================================
   Metanoia — Topic identity (proposal, M18, 25.9.2026, task #85)
   Colour + small icon per discipline / dimension / material, applied through
   classes so existing .card / .card__icon / .card__tag markup does not change.
   NOT linked from any live page yet — demoed on hero-options.html only.
   Needs a site-council colour-token gate before assets/css/style.css adopts
   --violet-* and --rose-*: they are new hues, everything else here reuses
   the existing teal/leaf/gold tokens or tints derived from them.
   ========================================================================== */

:root {
  /* New brand-extension tokens (proposed) */
  --violet-500: #7c60be;
  --violet-300: #d5ccea;
  --rose-500: #c46484;
  --rose-300: #eed3dc;
}

/* Generic mechanics: any element with a topic class gets --topic-a/--topic-b/
   --topic-ink set. .card__icon, .card__tag, .topic-chip and .topic-dot read
   those variables, with the site's default teal used as a fallback so a card
   that carries no topic class still looks exactly as it does today. */
.card__icon { background: var(--topic-grad, var(--grad-aqua)); }
.card__tag  { color: var(--topic-a, var(--teal-500)); }
[class*="topic--"] .card__detail,
[class*="topic--"].card__detail { border-inline-start: 3px solid var(--topic-a, var(--teal-400)); }

.topic-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--topic-tint, var(--paper-2));
  color: #0c1a1a; font-family: var(--font-head); font-weight: 600; font-size: .82rem;
}
.topic-chip .topic-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--topic-grad, var(--grad-aqua)); color: var(--topic-ink, #06322f); flex: none; }
.topic-chip .topic-dot svg { width: 15px; height: 15px; }
.topic-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; }

/* ---- helper to set the three variables in one line per topic ---- */
:where(.topic--neuroscience)          { --topic-a:#41c8bd; --topic-b:#0e3d3d; --topic-tint:#b8eae6; --topic-grad:linear-gradient(135deg,#0e3d3d,#41c8bd); --topic-ink:#04302e; }
:where(.topic--genetics)              { --topic-a:#4ebc85; --topic-b:#12514f; --topic-tint:#bce6d1; --topic-grad:linear-gradient(135deg,#12514f,#4ebc85); --topic-ink:#04302e; }
:where(.topic--chemistry)             { --topic-a:#7c60be; --topic-b:#3d2f66; --topic-tint:#d5ccea; --topic-grad:linear-gradient(135deg,#3d2f66,#7c60be); --topic-ink:#fbfaff; }
:where(.topic--cultivation)           { --topic-a:#347957; --topic-b:#123c26; --topic-tint:#7ec8a3; --topic-grad:linear-gradient(135deg,#123c26,#347957); --topic-ink:#eafff2; }
:where(.topic--therapy)               { --topic-a:#eaab3e; --topic-b:#7a5313; --topic-tint:#f9e7c8; --topic-grad:linear-gradient(135deg,#7a5313,#eaab3e); --topic-ink:#3a2606; }
:where(.topic--gender)                { --topic-a:#c46484; --topic-b:#5e2b3c; --topic-tint:#eed3dc; --topic-grad:linear-gradient(135deg,#5e2b3c,#c46484); --topic-ink:#fff5f8; }

:where(.topic--creativity)            { --topic-a:#33c19e; --topic-tint:#a6e7d7; --topic-grad:linear-gradient(135deg,#12514f,#33c19e); --topic-ink:#04302e; }
:where(.topic--problem-solving)       { --topic-a:#339ec1; --topic-tint:#a6d7e7; --topic-grad:linear-gradient(135deg,#123c4f,#339ec1); --topic-ink:#eafbff; }
:where(.topic--emotional-resilience)  { --topic-a:#3357c1; --topic-tint:#a6b7e7; --topic-grad:linear-gradient(135deg,#1c2a52,#3357c1); --topic-ink:#eef1ff; }
:where(.topic--social-connection)     { --topic-a:#5733c1; --topic-tint:#b7a6e7; --topic-grad:linear-gradient(135deg,#2a1c52,#5733c1); --topic-ink:#f3eeff; }
:where(.topic--self-awareness)        { --topic-a:#9e33c1; --topic-tint:#d7a6e7; --topic-grad:linear-gradient(135deg,#3f1c52,#9e33c1); --topic-ink:#fbeeff; }
:where(.topic--empathy)               { --topic-a:#c1339e; --topic-tint:#e7a6d7; --topic-grad:linear-gradient(135deg,#521c40,#c1339e); --topic-ink:#ffeef9; }
:where(.topic--well-being)            { --topic-a:#c13357; --topic-tint:#e7a6b7; --topic-grad:linear-gradient(135deg,#521c2c,#c13357); --topic-ink:#ffeef1; }
:where(.topic--perception)            { --topic-a:#c15733; --topic-tint:#e7b7a6; --topic-grad:linear-gradient(135deg,#522c1c,#c15733); --topic-ink:#fff1ea; }
:where(.topic--learning-memory)       { --topic-a:#c19e33; --topic-tint:#e7d7a6; --topic-grad:linear-gradient(135deg,#523f1c,#c19e33); --topic-ink:#3a2c06; }
:where(.topic--mindfulness)           { --topic-a:#9ec133; --topic-tint:#d7e7a6; --topic-grad:linear-gradient(135deg,#3f521c,#9ec133); --topic-ink:#213a06; }
:where(.topic--nature-connectedness)  { --topic-a:#57c133; --topic-tint:#b7e7a6; --topic-grad:linear-gradient(135deg,#2c521c,#57c133); --topic-ink:#0f3a06; }
:where(.topic--leadership)            { --topic-a:#33c157; --topic-tint:#a6e7b7; --topic-grad:linear-gradient(135deg,#1c522c,#33c157); --topic-ink:#04302e; }

:where(.topic--psilocybin)            { --topic-a:#4dcb77; --topic-tint:#b0e8c3; --topic-grad:linear-gradient(135deg,#154522,#4dcb77); --topic-ink:#eafff2; }
:where(.topic--dmt)                   { --topic-a:#4dcbb6; --topic-tint:#b0e8df; --topic-grad:linear-gradient(135deg,#0e3d3d,#4dcbb6); --topic-ink:#04302e; }
:where(.topic--ayahuasca)             { --topic-a:#4da1cb; --topic-tint:#b0d5e8; --topic-grad:linear-gradient(135deg,#123c4f,#4da1cb); --topic-ink:#eafbff; }
:where(.topic--mescaline)             { --topic-a:#4d62cb; --topic-tint:#b0b9e8; --topic-grad:linear-gradient(135deg,#1c2a52,#4d62cb); --topic-ink:#eef1ff; }
:where(.topic--iboga)                 { --topic-a:#774dcb; --topic-tint:#c3b0e8; --topic-grad:linear-gradient(135deg,#2a1c52,#774dcb); --topic-ink:#f3eeff; }
:where(.topic--5-meo-dmt)             { --topic-a:#b64dcb; --topic-tint:#dfb0e8; --topic-grad:linear-gradient(135deg,#3f1c52,#b64dcb); --topic-ink:#fbeeff; }
:where(.topic--lsd)                   { --topic-a:#cb4da1; --topic-tint:#e8b0d5; --topic-grad:linear-gradient(135deg,#521c40,#cb4da1); --topic-ink:#ffeef9; }
:where(.topic--mdma)                  { --topic-a:#e9a13b; --topic-tint:#f8d9a3; --topic-grad:linear-gradient(135deg,#7a5313,#e9a13b); --topic-ink:#3a2606; }