/* ==========================================================================
   TYPES.CSS - Pokemon Type Colors and Glow Effects
   ========================================================================== */

/* ==========================================================================
   GLOW CLASSES (for cards and sidebar)
   Sets --glow-color and --type-color CSS variables
   ========================================================================== */
.glow-grass {
  --glow-color: #78c850;
  --type-color: #78c850;
}
.glow-fire {
  --glow-color: #ff4444;
  --type-color: #ff4444;
}
.glow-water {
  --glow-color: #3b82f6;
  --type-color: #3b82f6;
}
.glow-poison {
  --glow-color: #a855f7;
  --type-color: #a855f7;
}
.glow-bug {
  --glow-color: #a8b820;
  --type-color: #a8b820;
}
.glow-normal {
  --glow-color: #a8a878;
  --type-color: #a8a878;
}
.glow-electric {
  --glow-color: #f8d030;
  --type-color: #f8d030;
}
.glow-ground {
  --glow-color: #e0c068;
  --type-color: #e0c068;
}
.glow-fairy {
  --glow-color: #ee99ac;
  --type-color: #ee99ac;
}
.glow-flying {
  --glow-color: #a890f0;
  --type-color: #a890f0;
}
.glow-fighting {
  --glow-color: #c03028;
  --type-color: #c03028;
}
.glow-psychic {
  --glow-color: #f85888;
  --type-color: #f85888;
}
.glow-rock {
  --glow-color: #b8a038;
  --type-color: #b8a038;
}
.glow-ice {
  --glow-color: #98d8d8;
  --type-color: #98d8d8;
}
.glow-ghost {
  --glow-color: #705898;
  --type-color: #705898;
}
.glow-dragon {
  --glow-color: #7038f8;
  --type-color: #7038f8;
}
.glow-steel {
  --glow-color: #d1d1e0;
  --type-color: #b8b8d0;
}
.glow-dark {
  --glow-color: #8d8a9c;
  --type-color: #5a5366;
}

/* ==========================================================================
   TYPE BADGE COLORS
   ========================================================================== */
.type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 650;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.type-grass {
  background: rgba(120, 200, 80, 0.2);
  border-color: #78c850;
  color: #f7fff7;
  box-shadow: 0 0 8px rgba(120, 200, 80, 0.45);
}

.type-fire {
  background: rgba(240, 128, 48, 0.2);
  border-color: #f08030;
  color: #fff7f0;
  box-shadow: 0 0 8px rgba(240, 128, 48, 0.45);
}

.type-water {
  background: rgba(104, 144, 240, 0.2);
  border-color: #6890f0;
  color: #f4f7ff;
  box-shadow: 0 0 8px rgba(104, 144, 240, 0.45);
}

.type-poison {
  background: rgba(160, 64, 160, 0.2);
  border-color: #a040a0;
  color: #fff5ff;
  box-shadow: 0 0 8px rgba(160, 64, 160, 0.45);
}

.type-bug {
  background: rgba(168, 184, 32, 0.2);
  border-color: #a8b820;
  color: #fbfff0;
  box-shadow: 0 0 8px rgba(168, 184, 32, 0.45);
}

.type-normal {
  background: rgba(168, 168, 120, 0.2);
  border-color: #a8a878;
  color: #fffef3;
  box-shadow: 0 0 8px rgba(168, 168, 120, 0.45);
}

.type-electric {
  background: rgba(248, 208, 48, 0.2);
  border-color: #f8d030;
  color: #fffdf3;
  box-shadow: 0 0 8px rgba(248, 208, 48, 0.45);
}

.type-ground {
  background: rgba(224, 192, 104, 0.2);
  border-color: #e0c068;
  color: #fff7ea;
  box-shadow: 0 0 8px rgba(224, 192, 104, 0.45);
}

.type-fairy {
  background: rgba(238, 153, 172, 0.2);
  border-color: #ee99ac;
  color: #fff6fa;
  box-shadow: 0 0 8px rgba(238, 153, 172, 0.45);
}

.type-flying {
  background: rgba(168, 144, 240, 0.2);
  border-color: #a890f0;
  color: #f7f5ff;
  box-shadow: 0 0 8px rgba(168, 144, 240, 0.45);
}

.type-fighting {
  background: rgba(192, 48, 40, 0.2);
  border-color: #c03028;
  color: #fff5f4;
  box-shadow: 0 0 8px rgba(192, 48, 40, 0.45);
}

.type-psychic {
  background: rgba(248, 88, 136, 0.2);
  border-color: #f85888;
  color: #fff5f8;
  box-shadow: 0 0 8px rgba(248, 88, 136, 0.45);
}

.type-rock {
  background: rgba(184, 160, 56, 0.2);
  border-color: #b8a038;
  color: #fffbea;
  box-shadow: 0 0 8px rgba(184, 160, 56, 0.45);
}

.type-ice {
  background: rgba(152, 216, 216, 0.2);
  border-color: #98d8d8;
  color: #f0ffff;
  box-shadow: 0 0 8px rgba(152, 216, 216, 0.45);
}

.type-ghost {
  background: rgba(112, 88, 152, 0.2);
  border-color: #705898;
  color: #f8f5ff;
  box-shadow: 0 0 8px rgba(112, 88, 152, 0.45);
}

.type-dragon {
  background: rgba(112, 56, 248, 0.2);
  border-color: #7038f8;
  color: #f5f0ff;
  box-shadow: 0 0 8px rgba(112, 56, 248, 0.45);
}

.type-steel {
  background: rgba(187, 197, 196, 0.25);
  border-color: #bbc5c4;
  color: #f8f8ff;
  box-shadow: 0 0 8px rgba(209, 209, 224, 0.5);
}

.type-dark {
  background: rgba(90, 83, 102, 0.3);
  border-color: #5a5366;
  color: #f5f3f8;
  box-shadow: 0 0 8px rgba(141, 138, 156, 0.45);
}