/* Watercolor Topic Pills - Generated automatically from news_topics.yml */

/* Base topic pill styling - single line, wraps to next line if no space */
.topic-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  margin: 6px 6px 6px 0;
  border-radius: var(--r-xl);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-slow);
  border: none;
  cursor: pointer;
  text-align: center;
  min-height: 44px;
  white-space: nowrap;
  overflow: visible;
  line-height: 1.3;
  flex-shrink: 0;
}

/* Tablet optimization */
@media (max-width: 768px) {
  .topic-tag {
    padding: var(--space-2) 14px;
    font-size: 13px;
    margin: 5px 5px 5px 0;
    min-height: 44px;
  }
}

/* Mobile optimization */
@media (max-width: 480px) {
  .topic-tag {
    padding: 7px var(--space-3);
    font-size: var(--space-3);
    margin: var(--space-1) var(--space-1) var(--space-1) 0;
    min-height: 44px;
  }
}

.topic-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 var(--space-1) var(--space-3) rgba(0, 0, 0, 0.15);
}

/* Main Topics - Soft Watercolor Palette */

.watercolor-finance {
  background: linear-gradient(135deg, var(--wc-mint-light) 0%, var(--wc-mint-primary) 100%);
  color: var(--wc-mint-text);
}

.watercolor-finance:hover {
  background: linear-gradient(135deg, var(--wc-mint-primary) 0%, var(--wc-mint-primary) 100%);
  color: var(--wc-mint-text-hover);
}

.watercolor-hr {
  background: linear-gradient(135deg, var(--wc-coral-light) 0%, var(--wc-coral-primary) 100%);
  color: var(--wc-coral-text);
}

.watercolor-hr:hover {
  background: linear-gradient(135deg, var(--wc-coral-primary) 0%, var(--wc-coral-primary) 100%);
  color: var(--wc-coral-text-hover);
}

.watercolor-operations {
  background: linear-gradient(135deg, var(--wc-teal-light) 0%, var(--wc-teal-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-operations:hover {
  background: linear-gradient(135deg, var(--wc-teal-primary) 0%, var(--wc-teal-primary) 100%);
  color: var(--wc-teal-text-hover);
}

.watercolor-marketing {
  background: linear-gradient(135deg, var(--wc-rose-light) 0%, var(--wc-rose-primary) 100%);
  color: var(--wc-rose-text);
}

.watercolor-marketing:hover {
  background: linear-gradient(135deg, var(--wc-rose-primary) 0%, var(--wc-rose-primary) 100%);
  color: var(--wc-rose-text-hover);
}

.watercolor-legal {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-legal:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-healthcare {
  background: linear-gradient(135deg, var(--wc-sage-light) 0%, var(--wc-sage-primary) 100%);
  color: var(--wc-sage-text);
}

.watercolor-healthcare:hover {
  background: linear-gradient(135deg, var(--wc-sage-primary) 0%, var(--wc-sage-primary) 100%);
  color: var(--wc-sage-text-hover);
}

.watercolor-media {
  background: linear-gradient(135deg, var(--wc-blush-light) 0%, var(--wc-blush-primary) 100%);
  color: var(--wc-blush-text);
}

.watercolor-media:hover {
  background: linear-gradient(135deg, var(--wc-blush-primary) 0%, var(--wc-blush-primary) 100%);
  color: var(--wc-blush-text-hover);
}

.watercolor-planning {
  background: linear-gradient(135deg, var(--wc-lavender-light) 0%, var(--wc-lavender-primary) 100%);
  color: var(--wc-lavender-text);
}

.watercolor-planning:hover {
  background: linear-gradient(135deg, var(--wc-lavender-primary) 0%, var(--wc-lavender-primary) 100%);
  color: var(--wc-lavender-text-hover);
}

.watercolor-interviewing {
  background: linear-gradient(135deg, var(--wc-teal-light) 0%, var(--wc-teal-primary) 100%);
  color: var(--wc-teal-text-alt);
}

.watercolor-interviewing:hover {
  background: linear-gradient(135deg, var(--wc-teal-primary) 0%, var(--wc-teal-primary) 100%);
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-careers {
  background: linear-gradient(135deg, var(--wc-apricot-light) 0%, var(--wc-apricot-primary) 100%);
  color: var(--wc-apricot-text);
}

.watercolor-careers:hover {
  background: linear-gradient(135deg, var(--wc-apricot-primary) 0%, var(--wc-apricot-primary) 100%);
  color: var(--wc-apricot-text-hover);
}

.watercolor-workforce_changes {
  background: linear-gradient(135deg, var(--wc-coral-light) 0%, var(--wc-coral-primary) 100%);
  color: var(--wc-coral-text);
}

.watercolor-workforce_changes:hover {
  background: linear-gradient(135deg, var(--wc-coral-primary) 0%, var(--wc-coral-primary) 100%);
  color: var(--wc-coral-text-hover);
}

.watercolor-talent_growth {
  background: linear-gradient(135deg, var(--wc-mint-light) 0%, var(--wc-mint-primary) 100%);
  color: var(--wc-mint-text);
}

.watercolor-talent_growth:hover {
  background: linear-gradient(135deg, var(--wc-mint-primary) 0%, var(--wc-mint-primary) 100%);
  color: var(--wc-mint-text-hover);
}

.watercolor-skills_mentorship {
  background: linear-gradient(135deg, var(--wc-teal-light) 0%, var(--wc-teal-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-skills_mentorship:hover {
  background: linear-gradient(135deg, var(--wc-teal-primary) 0%, var(--wc-teal-primary) 100%);
  color: var(--wc-teal-text-hover);
}

/* Concept Topics (46 total) */

.watercolor-ai_agents {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-ai_agents:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-machine_learning {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-machine_learning:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-cloud_computing {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-sky-text);
}

.watercolor-cloud_computing:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-sky-text-hover);
}

.watercolor-cybersecurity {
  background: linear-gradient(135deg, var(--wc-coral-light) 0%, var(--wc-coral-primary) 100%);
  color: var(--wc-pink-text);
}

.watercolor-cybersecurity:hover {
  background: linear-gradient(135deg, var(--wc-coral-primary) 0%, var(--wc-coral-primary) 100%);
  color: var(--wc-rose-text);
}

.watercolor-generative_ai {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-generative_ai:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-ai_ethics {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-ai_ethics:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-ai_governance {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-ai_governance:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-ai_safety {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-ai_safety:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-ai_training {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-ai_training:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-artificial_general_intelligence {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-artificial_general_intelligence:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-attention_mechanism {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-attention_mechanism:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-autonomous_vehicles {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-autonomous_vehicles:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-computer_vision {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-computer_vision:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-corporate_governance {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-corporate_governance:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-data_science {
  background: linear-gradient(135deg, var(--wc-teal-light) 0%, var(--wc-teal-primary) 100%);
  color: var(--wc-teal-text-alt);
}

.watercolor-data_science:hover {
  background: linear-gradient(135deg, var(--wc-teal-primary) 0%, var(--wc-teal-primary) 100%);
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-deep_learning {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-deep_learning:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-embeddings {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-embeddings:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-financial_technology {
  background: linear-gradient(135deg, var(--wc-mint-light) 0%, var(--wc-mint-primary) 100%);
  color: var(--wc-mint-text);
}

.watercolor-financial_technology:hover {
  background: linear-gradient(135deg, var(--wc-mint-primary) 0%, var(--wc-mint-primary) 100%);
  color: var(--wc-mint-text-hover);
}

.watercolor-fine_tuning {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-fine_tuning:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-gig_economy {
  background: linear-gradient(135deg, var(--wc-coral-light) 0%, var(--wc-coral-primary) 100%);
  color: var(--wc-coral-text);
}

.watercolor-gig_economy:hover {
  background: linear-gradient(135deg, var(--wc-coral-primary) 0%, var(--wc-coral-primary) 100%);
  color: var(--wc-coral-text-hover);
}

.watercolor-ipo {
  background: linear-gradient(135deg, var(--wc-mint-light) 0%, var(--wc-mint-primary) 100%);
  color: var(--wc-mint-text);
}

.watercolor-ipo:hover {
  background: linear-gradient(135deg, var(--wc-mint-primary) 0%, var(--wc-mint-primary) 100%);
  color: var(--wc-mint-text-hover);
}

.watercolor-large_language_models {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-large_language_models:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-leadership {
  background: linear-gradient(135deg, var(--wc-apricot-light) 0%, var(--wc-apricot-primary) 100%);
  color: var(--wc-apricot-text);
}

.watercolor-leadership:hover {
  background: linear-gradient(135deg, var(--wc-apricot-primary) 0%, var(--wc-apricot-primary) 100%);
  color: var(--wc-apricot-text-hover);
}

.watercolor-market_research {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-market_research:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-mergers_acquisitions {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-mergers_acquisitions:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

.watercolor-multimodal_ai {
  background: linear-gradient(135deg, var(--md-light-blue-1), var(--md-light-blue-2));
  color: var(--wc-periwinkle-text);
}

.watercolor-multimodal_ai:hover {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-natural_language_processing {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-natural_language_processing:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-open_source {
  background: linear-gradient(135deg, var(--md-blue-1), var(--md-blue-2));
  color: var(--wc-sky-text);
}

.watercolor-open_source:hover {
  background: linear-gradient(135deg, var(--md-blue-2), var(--md-blue-3));
  color: var(--wc-sky-text-hover);
}

.watercolor-private_equity {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-private_equity:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

.watercolor-prompt_engineering {
  background: linear-gradient(135deg, var(--md-light-blue-1), var(--md-light-blue-2));
  color: var(--wc-periwinkle-text);
}

.watercolor-prompt_engineering:hover {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-quantum_computing {
  background: linear-gradient(135deg, var(--md-purple-1), var(--md-purple-2));
  color: var(--wc-purple-text);
}

.watercolor-quantum_computing:hover {
  background: linear-gradient(135deg, var(--md-purple-2), var(--md-purple-3));
  color: var(--wc-purple-text-hover);
}

.watercolor-rag {
  background: linear-gradient(135deg, var(--md-light-blue-1), var(--md-light-blue-2));
  color: var(--wc-periwinkle-text);
}

.watercolor-rag:hover {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-reinforcement_learning {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-reinforcement_learning:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-remote_work {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-remote_work:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-3));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-renewable_energy {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-renewable_energy:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

.watercolor-startups {
  background: linear-gradient(135deg, var(--md-amber-1), var(--md-amber-2));
  color: var(--wc-butter-text);
}

.watercolor-startups:hover {
  background: linear-gradient(135deg, var(--md-amber-2), var(--md-amber-3));
  color: var(--wc-apricot-text);
}

.watercolor-transformers {
  background: linear-gradient(135deg, var(--wc-periwinkle-light) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text);
}

.watercolor-transformers:hover {
  background: linear-gradient(135deg, var(--wc-periwinkle-primary) 0%, var(--wc-periwinkle-primary) 100%);
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-venture_capital {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-venture_capital:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

.watercolor-data_analytics {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-data_analytics:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-3));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-internet_of_things {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-internet_of_things:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-3));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-virtual_reality {
  background: linear-gradient(135deg, var(--md-purple-1), var(--md-purple-2));
  color: var(--wc-purple-text);
}

.watercolor-virtual_reality:hover {
  background: linear-gradient(135deg, var(--md-purple-2), var(--md-purple-3));
  color: var(--wc-purple-text-hover);
}

.watercolor-software_development {
  background: linear-gradient(135deg, var(--md-blue-1), var(--md-blue-2));
  color: var(--wc-sky-text);
}

.watercolor-software_development:hover {
  background: linear-gradient(135deg, var(--md-blue-2), var(--md-blue-3));
  color: var(--wc-sky-text-hover);
}

.watercolor-agile_methodology {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-agile_methodology:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

.watercolor-devops {
  background: linear-gradient(135deg, var(--md-blue-1), var(--md-blue-2));
  color: var(--wc-sky-text);
}

.watercolor-devops:hover {
  background: linear-gradient(135deg, var(--md-blue-2), var(--md-blue-3));
  color: var(--wc-sky-text-hover);
}

.watercolor-mobile_development {
  background: linear-gradient(135deg, var(--md-blue-1), var(--md-blue-2));
  color: var(--wc-sky-text);
}

.watercolor-mobile_development:hover {
  background: linear-gradient(135deg, var(--md-blue-2), var(--md-blue-3));
  color: var(--wc-sky-text-hover);
}

.watercolor-web_development {
  background: linear-gradient(135deg, var(--md-blue-1), var(--md-blue-2));
  color: var(--wc-sky-text);
}

.watercolor-web_development:hover {
  background: linear-gradient(135deg, var(--md-blue-2), var(--md-blue-3));
  color: var(--wc-sky-text-hover);
}

.watercolor-quality_assurance {
  background: linear-gradient(135deg, var(--md-amber-1), var(--md-amber-2));
  color: var(--wc-butter-text);
}

.watercolor-quality_assurance:hover {
  background: linear-gradient(135deg, var(--md-amber-2), var(--md-amber-3));
  color: var(--wc-apricot-text);
}

.watercolor-it_infrastructure {
  background: linear-gradient(135deg, var(--md-blue-1), var(--md-blue-2));
  color: var(--wc-sky-text);
}

.watercolor-it_infrastructure:hover {
  background: linear-gradient(135deg, var(--md-blue-2), var(--md-blue-3));
  color: var(--wc-sky-text-hover);
}

.watercolor-digital_transformation {
  background: linear-gradient(135deg, var(--md-light-blue-1), var(--md-light-blue-2));
  color: var(--wc-periwinkle-text);
}

.watercolor-digital_transformation:hover {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-consumer_behavior {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-consumer_behavior:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-supply_chain {
  background: linear-gradient(135deg, var(--md-amber-yellow-1), var(--md-amber-yellow-2));
  color: var(--wc-apricot-text);
}

.watercolor-supply_chain:hover {
  background: linear-gradient(135deg, var(--md-amber-yellow-2), var(--md-amber-yellow-3));
  color: var(--wc-apricot-text-hover);
}

.watercolor-ecommerce {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-ecommerce:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-business_intelligence {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-business_intelligence:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-3));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-seo {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-seo:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-content_marketing {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-content_marketing:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-social_media {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-social_media:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-email_marketing {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-email_marketing:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-video_marketing {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-video_marketing:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-paid_advertising {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-paid_advertising:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-brand_management {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-brand_management:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-customer_experience {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-customer_experience:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-product_management {
  background: linear-gradient(135deg, var(--md-amber-1), var(--md-amber-2));
  color: var(--wc-butter-text);
}

.watercolor-product_management:hover {
  background: linear-gradient(135deg, var(--md-amber-2), var(--md-amber-3));
  color: var(--wc-apricot-text);
}

.watercolor-user_experience {
  background: linear-gradient(135deg, var(--md-rose-1), var(--md-rose-2));
  color: var(--wc-pink-text);
}

.watercolor-user_experience:hover {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-api_integration {
  background: linear-gradient(135deg, var(--md-blue-1), var(--md-blue-2));
  color: var(--wc-sky-text);
}

.watercolor-api_integration:hover {
  background: linear-gradient(135deg, var(--md-blue-2), var(--md-blue-3));
  color: var(--wc-sky-text-hover);
}

.watercolor-database_management {
  background: linear-gradient(135deg, var(--md-blue-1), var(--md-blue-2));
  color: var(--wc-sky-text);
}

.watercolor-database_management:hover {
  background: linear-gradient(135deg, var(--md-blue-2), var(--md-blue-3));
  color: var(--wc-sky-text-hover);
}

.watercolor-payment_processing {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-payment_processing:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

/* Conversation Topics (15 total) */

.watercolor-artificial_intelligence {
  background: linear-gradient(135deg, var(--md-light-blue-1), var(--md-light-blue-2));
  color: var(--wc-periwinkle-text);
}

.watercolor-artificial_intelligence:hover {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-competition {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-competition:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-3));
  color: var(--wc-rose-text-hover);
}

.watercolor-earnings {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-earnings:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

.watercolor-innovation {
  background: linear-gradient(135deg, var(--md-light-blue-1), var(--md-light-blue-2));
  color: var(--wc-periwinkle-text);
}

.watercolor-innovation:hover {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-investment {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-investment:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

.watercolor-launch {
  background: linear-gradient(135deg, var(--md-amber-1), var(--md-amber-2));
  color: var(--wc-butter-text);
}

.watercolor-launch:hover {
  background: linear-gradient(135deg, var(--md-amber-2), var(--md-amber-3));
  color: var(--wc-apricot-text);
}

.watercolor-leaks_rumors {
  background: linear-gradient(135deg, var(--md-orange-1), var(--md-orange-2));
  color: var(--wc-coral-text);
}

.watercolor-leaks_rumors:hover {
  background: linear-gradient(135deg, var(--md-orange-2), var(--md-orange-3));
  color: var(--wc-coral-text-hover);
}

.watercolor-partnerships {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-partnerships:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

.watercolor-privacy {
  background: linear-gradient(135deg, var(--md-indigo-1), var(--md-indigo-2));
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-privacy:hover {
  background: linear-gradient(135deg, var(--md-indigo-2), var(--md-indigo-3));
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-regulation {
  background: linear-gradient(135deg, var(--md-indigo-1), var(--md-indigo-2));
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-regulation:hover {
  background: linear-gradient(135deg, var(--md-indigo-2), var(--md-indigo-3));
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-review {
  background: linear-gradient(135deg, var(--md-amber-1), var(--md-amber-2));
  color: var(--wc-butter-text);
}

.watercolor-review:hover {
  background: linear-gradient(135deg, var(--md-amber-2), var(--md-amber-3));
  color: var(--wc-apricot-text);
}

.watercolor-security {
  background: linear-gradient(135deg, var(--md-rose-1), var(--md-rose-2));
  color: var(--wc-pink-text);
}

.watercolor-security:hover {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-sustainability {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-sustainability:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-3));
  color: var(--wc-mint-text-hover);
}

.watercolor-update {
  background: linear-gradient(135deg, var(--md-blue-1), var(--md-blue-2));
  color: var(--wc-sky-text);
}

.watercolor-update:hover {
  background: linear-gradient(135deg, var(--md-blue-2), var(--md-blue-3));
  color: var(--wc-sky-text-hover);
}

.watercolor-workforce {
  background: linear-gradient(135deg, var(--md-orange-1), var(--md-orange-2));
  color: var(--wc-coral-text);
}

.watercolor-workforce:hover {
  background: linear-gradient(135deg, var(--md-orange-2), var(--md-orange-3));
  color: var(--wc-coral-text-hover);
}

/* Fallback for unmapped topics */
.watercolor-default {
  background: linear-gradient(135deg, var(--wc-lavender-light) 0%, var(--wc-lavender-primary) 100%);
  color: var(--wc-lavender-text);
}

.watercolor-default:hover {
  background: linear-gradient(135deg, var(--wc-lavender-primary) 0%, var(--wc-lavender-primary) 100%);
  color: var(--wc-lavender-text-hover);
}

/* Automatically added missing watercolor classes */

.watercolor-adept {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-adept:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-1));
  color: var(--wc-mint-text-hover);
}

.watercolor-adobe {
  background: linear-gradient(135deg, var(--md-orange-1), var(--md-orange-2));
  color: var(--wc-coral-text);
}

.watercolor-adobe:hover {
  background: linear-gradient(135deg, var(--md-orange-2), var(--md-orange-1));
  color: var(--wc-coral-text-hover);
}

.watercolor-ai21_labs {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-ai21_labs:hover {
  background: linear-gradient(135deg, var(--md-light-blue-3), var(--md-light-blue-2));
  color: var(--wc-teal-text-hover);
}

.watercolor-amazon {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-amazon:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-1));
  color: var(--wc-rose-text-hover);
}

.watercolor-amd {
  background: linear-gradient(135deg, var(--md-indigo-1), var(--md-indigo-2));
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-amd:hover {
  background: linear-gradient(135deg, var(--md-indigo-2), var(--md-indigo-1));
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-anthropic {
  background: linear-gradient(135deg, var(--md-lime-yellow-1), var(--md-lime-yellow-2));
  color: var(--wc-sage-text);
}

.watercolor-anthropic:hover {
  background: linear-gradient(135deg, var(--md-lime-yellow-2), var(--md-lime-yellow-1));
  color: var(--wc-sage-text-hover);
}

.watercolor-apple {
  background: linear-gradient(135deg, var(--md-amber-yellow-1), var(--md-amber-yellow-2));
  color: var(--wc-apricot-text);
}

.watercolor-apple:hover {
  background: linear-gradient(135deg, var(--md-amber-yellow-2), var(--md-amber-yellow-1));
  color: var(--wc-apricot-text-hover);
}

.watercolor-berkshire_hathaway {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-berkshire_hathaway:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-1));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-characterai {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-characterai:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-1));
  color: var(--wc-mint-text-hover);
}

.watercolor-coca_cola {
  background: linear-gradient(135deg, var(--md-orange-1), var(--md-orange-2));
  color: var(--wc-coral-text);
}

.watercolor-coca_cola:hover {
  background: linear-gradient(135deg, var(--md-orange-2), var(--md-orange-1));
  color: var(--wc-coral-text-hover);
}

.watercolor-cohere {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-cohere:hover {
  background: linear-gradient(135deg, var(--md-light-blue-3), var(--md-light-blue-2));
  color: var(--wc-teal-text-hover);
}

.watercolor-databricks {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-databricks:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-1));
  color: var(--wc-rose-text-hover);
}

.watercolor-disney {
  background: linear-gradient(135deg, var(--md-indigo-1), var(--md-indigo-2));
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-disney:hover {
  background: linear-gradient(135deg, var(--md-indigo-2), var(--md-indigo-1));
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-google {
  background: linear-gradient(135deg, var(--md-lime-yellow-1), var(--md-lime-yellow-2));
  color: var(--wc-sage-text);
}

.watercolor-google:hover {
  background: linear-gradient(135deg, var(--md-lime-yellow-2), var(--md-lime-yellow-1));
  color: var(--wc-sage-text-hover);
}

.watercolor-google_deepmind {
  background: linear-gradient(135deg, var(--md-amber-yellow-1), var(--md-amber-yellow-2));
  color: var(--wc-apricot-text);
}

.watercolor-google_deepmind:hover {
  background: linear-gradient(135deg, var(--md-amber-yellow-2), var(--md-amber-yellow-1));
  color: var(--wc-apricot-text-hover);
}

.watercolor-home_depot {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-home_depot:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-1));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-hugging_face {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-hugging_face:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-1));
  color: var(--wc-mint-text-hover);
}

.watercolor-ibm {
  background: linear-gradient(135deg, var(--md-orange-1), var(--md-orange-2));
  color: var(--wc-coral-text);
}

.watercolor-ibm:hover {
  background: linear-gradient(135deg, var(--md-orange-2), var(--md-orange-1));
  color: var(--wc-coral-text-hover);
}

.watercolor-inflection_ai {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-inflection_ai:hover {
  background: linear-gradient(135deg, var(--md-light-blue-3), var(--md-light-blue-2));
  color: var(--wc-teal-text-hover);
}

.watercolor-intel {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-intel:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-1));
  color: var(--wc-rose-text-hover);
}

.watercolor-johnson_johnson {
  background: linear-gradient(135deg, var(--md-indigo-1), var(--md-indigo-2));
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-johnson_johnson:hover {
  background: linear-gradient(135deg, var(--md-indigo-2), var(--md-indigo-1));
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-jpmorgan_chase {
  background: linear-gradient(135deg, var(--md-lime-yellow-1), var(--md-lime-yellow-2));
  color: var(--wc-sage-text);
}

.watercolor-jpmorgan_chase:hover {
  background: linear-gradient(135deg, var(--md-lime-yellow-2), var(--md-lime-yellow-1));
  color: var(--wc-sage-text-hover);
}

.watercolor-mastercard {
  background: linear-gradient(135deg, var(--md-amber-yellow-1), var(--md-amber-yellow-2));
  color: var(--wc-apricot-text);
}

.watercolor-mastercard:hover {
  background: linear-gradient(135deg, var(--md-amber-yellow-2), var(--md-amber-yellow-1));
  color: var(--wc-apricot-text-hover);
}

.watercolor-mcdonalds {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-mcdonalds:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-1));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-meta {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-meta:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-1));
  color: var(--wc-mint-text-hover);
}

.watercolor-meta_ai {
  background: linear-gradient(135deg, var(--md-orange-1), var(--md-orange-2));
  color: var(--wc-coral-text);
}

.watercolor-meta_ai:hover {
  background: linear-gradient(135deg, var(--md-orange-2), var(--md-orange-1));
  color: var(--wc-coral-text-hover);
}

.watercolor-microsoft {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-microsoft:hover {
  background: linear-gradient(135deg, var(--md-light-blue-3), var(--md-light-blue-2));
  color: var(--wc-teal-text-hover);
}

.watercolor-microsoft_ai {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-microsoft_ai:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-1));
  color: var(--wc-rose-text-hover);
}

.watercolor-midjourney {
  background: linear-gradient(135deg, var(--md-indigo-1), var(--md-indigo-2));
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-midjourney:hover {
  background: linear-gradient(135deg, var(--md-indigo-2), var(--md-indigo-1));
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-netflix {
  background: linear-gradient(135deg, var(--md-lime-yellow-1), var(--md-lime-yellow-2));
  color: var(--wc-sage-text);
}

.watercolor-netflix:hover {
  background: linear-gradient(135deg, var(--md-lime-yellow-2), var(--md-lime-yellow-1));
  color: var(--wc-sage-text-hover);
}

.watercolor-nvidia {
  background: linear-gradient(135deg, var(--md-amber-yellow-1), var(--md-amber-yellow-2));
  color: var(--wc-apricot-text);
}

.watercolor-nvidia:hover {
  background: linear-gradient(135deg, var(--md-amber-yellow-2), var(--md-amber-yellow-1));
  color: var(--wc-apricot-text-hover);
}

.watercolor-openai {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-openai:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-1));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-oracle {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-oracle:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-1));
  color: var(--wc-mint-text-hover);
}

.watercolor-perplexity {
  background: linear-gradient(135deg, var(--md-orange-1), var(--md-orange-2));
  color: var(--wc-coral-text);
}

.watercolor-perplexity:hover {
  background: linear-gradient(135deg, var(--md-orange-2), var(--md-orange-1));
  color: var(--wc-coral-text-hover);
}

.watercolor-procter_gamble {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-procter_gamble:hover {
  background: linear-gradient(135deg, var(--md-light-blue-3), var(--md-light-blue-2));
  color: var(--wc-teal-text-hover);
}

.watercolor-replicate {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-replicate:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-1));
  color: var(--wc-rose-text-hover);
}

.watercolor-runway {
  background: linear-gradient(135deg, var(--md-indigo-1), var(--md-indigo-2));
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-runway:hover {
  background: linear-gradient(135deg, var(--md-indigo-2), var(--md-indigo-1));
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-salesforce {
  background: linear-gradient(135deg, var(--md-lime-yellow-1), var(--md-lime-yellow-2));
  color: var(--wc-sage-text);
}

.watercolor-salesforce:hover {
  background: linear-gradient(135deg, var(--md-lime-yellow-2), var(--md-lime-yellow-1));
  color: var(--wc-sage-text-hover);
}

.watercolor-samsung {
  background: linear-gradient(135deg, var(--md-amber-yellow-1), var(--md-amber-yellow-2));
  color: var(--wc-apricot-text);
}

.watercolor-samsung:hover {
  background: linear-gradient(135deg, var(--md-amber-yellow-2), var(--md-amber-yellow-1));
  color: var(--wc-apricot-text-hover);
}

.watercolor-scale_ai {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-scale_ai:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-1));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-shopify {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-shopify:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-1));
  color: var(--wc-mint-text-hover);
}

.watercolor-slack {
  background: linear-gradient(135deg, var(--md-orange-1), var(--md-orange-2));
  color: var(--wc-coral-text);
}

.watercolor-slack:hover {
  background: linear-gradient(135deg, var(--md-orange-2), var(--md-orange-1));
  color: var(--wc-coral-text-hover);
}

.watercolor-sony {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-sony:hover {
  background: linear-gradient(135deg, var(--md-light-blue-3), var(--md-light-blue-2));
  color: var(--wc-teal-text-hover);
}

.watercolor-spotify {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-spotify:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-1));
  color: var(--wc-rose-text-hover);
}

.watercolor-stability_ai {
  background: linear-gradient(135deg, var(--md-indigo-1), var(--md-indigo-2));
  color: var(--wc-periwinkle-text-alt);
}

.watercolor-stability_ai:hover {
  background: linear-gradient(135deg, var(--md-indigo-2), var(--md-indigo-1));
  color: var(--wc-periwinkle-text-alt-hover);
}

.watercolor-tesla {
  background: linear-gradient(135deg, var(--md-lime-yellow-1), var(--md-lime-yellow-2));
  color: var(--wc-sage-text);
}

.watercolor-tesla:hover {
  background: linear-gradient(135deg, var(--md-lime-yellow-2), var(--md-lime-yellow-1));
  color: var(--wc-sage-text-hover);
}

.watercolor-together_ai {
  background: linear-gradient(135deg, var(--md-amber-yellow-1), var(--md-amber-yellow-2));
  color: var(--wc-apricot-text);
}

.watercolor-together_ai:hover {
  background: linear-gradient(135deg, var(--md-amber-yellow-2), var(--md-amber-yellow-1));
  color: var(--wc-apricot-text-hover);
}

.watercolor-unitedhealth {
  background: linear-gradient(135deg, var(--md-teal-1), var(--md-teal-2));
  color: var(--wc-teal-text-alt);
}

.watercolor-unitedhealth:hover {
  background: linear-gradient(135deg, var(--md-teal-2), var(--md-teal-1));
  color: var(--wc-teal-text-alt-hover);
}

.watercolor-visa {
  background: linear-gradient(135deg, var(--md-green-1), var(--md-green-2));
  color: var(--wc-mint-text);
}

.watercolor-visa:hover {
  background: linear-gradient(135deg, var(--md-green-2), var(--md-green-1));
  color: var(--wc-mint-text-hover);
}

.watercolor-walmart {
  background: linear-gradient(135deg, var(--md-orange-1), var(--md-orange-2));
  color: var(--wc-coral-text);
}

.watercolor-walmart:hover {
  background: linear-gradient(135deg, var(--md-orange-2), var(--md-orange-1));
  color: var(--wc-coral-text-hover);
}

.watercolor-weights_biases {
  background: linear-gradient(135deg, var(--md-light-blue-2), var(--md-light-blue-3));
  color: var(--wc-periwinkle-text-hover);
}

.watercolor-weights_biases:hover {
  background: linear-gradient(135deg, var(--md-light-blue-3), var(--md-light-blue-2));
  color: var(--wc-teal-text-hover);
}

.watercolor-zoom {
  background: linear-gradient(135deg, var(--md-pink-1), var(--md-pink-2));
  color: var(--wc-rose-text);
}

.watercolor-zoom:hover {
  background: linear-gradient(135deg, var(--md-pink-2), var(--md-pink-1));
  color: var(--wc-rose-text-hover);
}


/* Dark mode support for watercolor pills as per DESIGN.md */
[data-theme="dark"] [class*="watercolor-"] {
  filter: grayscale(100%) brightness(0.85);
  opacity: 0.65;
}

[data-theme="dark"] .vostego-card:hover [class*="watercolor-"],
[data-theme="dark"] [class*="watercolor-"]:hover {
  filter: none;
  opacity: 1;
}